html5(2)-知识

html5-学习

HTML5概念

什么是HTML5
html5是新的超文本标记语言。
html5=新的标签+css3+新的javascript的api。
HTML5和HTML4有什么区别
A. 多了很多语义化的标签（有利于seo和开发者维护）
B. 新增了很多功能、视频标签video、画布标签、本地存储、地理位置、websocket等等……

阶段：
1 初体验
2 掌握和理解它的原理
3 忘记-反复查文档-忘记-查文档
HTML5可以解决什么问题
A. 制定了更加统一和规范的标准
B. 各浏览器之间的兼容性低的问题
C. 文档结构不明确
D. 网站应用程序的功能受到了限制
语法
标签忽略大小写，建议小写
属性值：

html写法：

html5写法：
html5中增加布尔值，有属性为true，没有属性为false。
属性值可以省略引号 建议不要省略
语义化标签
常见的语义化的标签
标签名 释义 描述
header 头部标签 存放logo或者内容块的头部
nav 导航标签 存放导航的链接
section 区块标签（和div一样，div没有收录到html5的大纲算法当中） 和div一样的作用
article 文章标签 存放内容正文
header 存放标题
hgound 标题集合 header下存放多个标题
Section 区块标签 存放内容
aside 侧边标签 存放和内容信息没有绝对关系的信息
footer 尾部标签 存放区块底部信息和整个网页的底部信息
time 时间标签-行内元素 存放时间相关的信息
adress 地址标签 存放地址相关信息

语义更强烈一点的微数据
概念：
使用某种特定的格式书写机器更容易抓取和分析的代码

写好符合标准的微数据，搜索引擎是可以更加精确的生成对应的json格式

Itemscope：标明是一个微数据项
Itemtype：标明数据项的类型-人
Itemprop：属性 值
Itemscope:
{
Itemtype:”data-………………”,
Itempropties:[
“name”:”王xx”,
“nickname”:”wungking”
]
}

###　兼容处理
不兼容html5的浏览器会将新的标签解析为行内元素 inline
低版本的ie（ie9以下）还是不识别标签（出问题），但是可以识别document.creatElement(‘tagName’)创建的元素，所以 最好将html5的新的标签都创建一遍，这样子就能识别了。
有专门的类库-叫做 html5shiv
条件注释

兼容性检测网站：
http://html5test.com/index.html
*WAI-ARIA
WAI-ARIA , 是Web Accessibility Initiative - Accessible Rich Internet Applications 的缩写，她主要解决的一个问题：让残障人士能无障碍地访问网页上的动态内容。

表单

输入类型
类型 使用示例 含义
email 输入邮箱格式
tel 输入手机号码格式
url 输入url格式
search 搜索框（体现语义化）
number 输入数字格式
range 自由拖动滑块
color 拾色器
time
date
datetime
datetime-local
month
week

表单元素

元素 含义

生成加密字符串

输出结果

度量器

进度条

表单属性

属性 用法 含义
placeholder 占位符
autofocus 自动获得焦点
multiple 多文件上传
autocomplete 自动完成
form
novalidate

关闭验证
required 必填项
pattern 自定义验证

表单事件

Dom操作拓展
新的：

新增的：document.querySelector()-根据css选择器获取目标元素-单个

新增的：document.querySelectorAll()-根据css选择器获取目标元素-数组

获取dom元素的方式
以前：
document.getElementById-根据id获取目标元素-单个document.getElementByTagName-根据id获取目标元素-单个document.getElementByClassName-根据类名获取目标元素-数组document.getElementByName-根据name属性获取目标元素-数组
h5：
document.querySelector()-根据css选择器获取目标元素-单个
document.querySelectorAll()-根据css选择器获取目标元素-数组

四种操作class的方式
dom.classList.add() – 给dom元素添加class
dom.classList.remove() – 给dom移除class
dom.classList.contains() – 判断dom元素是否包含某个class
dom.classList.toggle() – 切换dom元素的class

自定义属性

H5中，推荐自定义的属性写法：
data-*

在js中获取：
以前：dom.getAttribute(“title”)

现在：dom.dataset.title

多媒体标签
audio
播放声音
目前只支持3种格式
Video
视频标签
目前只支持三种视频格式：
例子：

Video.js
地理位置
navigator.geolocation
navigator.geolocation.getCurrentPosition

文件操作
Input type=”file”.onchange():选择了文件触发
FileReader对象
FileReader.readAsText()：将文件以文本的形式读入到FileReader对象中
FileReader.readAsDataUrl()：将图片以图片数据的形式读入到FileReader对象中（路径的形式是：普通的base64）。
FileReader.result：存放文件读入的数据
FileReader.onload():文件读取完毕之后触发
本地存储
名称 是否可以跨页面 是否持久化（关闭浏览器还存在） 备注
SessionStorage 否 否 刷新当前页面还存在
Localstorage 是 是 只要不手动删除，一直都存在
Cookie 不可以 可以设置过期时间 一直沿用至今的本地存储技术

Css3

CSS即层叠样式表（Cascading StyleSheet）。 在网页制作时采用层叠样式表技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。 只要对相应的代码做一些简单的修改，就可以改变同一页面的不同部分，或者页数不同的网页的外观和格式。CSS3是CSS技术的升级版本，CSS3语言开发是朝着模块化发展的。以前的规范作为一个模块实在是太庞大而且比较复杂，所以，把它分解为一些小的模块，更多新的模块也被加入进来。这些模块包括： 盒子模型、列表模块、超链接方式 、语言模块 、背景和边框 、文字特效 、多栏布局等。

作用：可以很简单的就实现了以前很复杂的功能（如 边框圆角、边框图片、渐变、过渡、画布、动画等等。。十分强大）

手册
[] 表示全部可选项
|| 表示或者
| 表示多选一
？ 表示0个或者1个

• 表示0个或者多个

• 代表出现1次或以上。
  {} 表示范围

选择器

元素选择符（css2）
标签选择符

ID选择符

类选择符

通配选择符

关系选择符
后代选择符
div p a {
color: salmon;
}

子代选择符
div>a {
color: darkblue;
}

相邻（下一个）选择符
.two+li {
background-color: rosybrown;
}

兄弟（小弟）选择符-css3
.one~li {
background-color: yellow;
}

属性选择符
具有id属性的选择符：
div[id] {
background-color: gold;
}
具有id属性并且属性值确定的选择符：
div[id=”sx2”] {
background-color: slateblue;
}
具有class属性，并且属性值包含有”b”的选择符（多个属性值以空格间隔开）：
div[class~=”b”] {
background-color: darkblue;
color: #fff;
}
包含class属性，并且属性值是以data开头的选择符并且是以”-“间隔开的：
div[class|=”data”] {
font-size: 22px;
background-color: darkorchid;
}
包含属性值id，并且属性值是以 red开头：
div[id^=”red”] {
background-color: red;
}
包含属性值id，并且属性值是以 green结尾：
div[id$=”green”] {
background-color: green;
}
包含属性值id，只要里面包含有 bbq：
div[id*=”bbq”] {
background-color: darkcyan;
}

以上一共有7个属性选择符，css3的有三个。
伪类选择符
first-child/first-of-type
last-child/last-of-type
nth-child/nth-of-type
了解：

伪元素选择符
以前伪元素和伪类都是使用一个冒号，h5推荐 伪元素使用两个冒号。

::before/after

::first-letter

::first-line

::css3: ::-webkit-input-placeholder

css3: ::section

盒子模型
标准模式：
以前的盒子模型
真实宽度=width+padding+border;
怪异模式-内减模式：
真实宽度（代码里面写的width：）=width+padding+border;

阴影
文本阴影
4个参数（水平偏移、垂直偏移、模糊值、颜色）
text-shadow: 10px 10px 10px red,-1px -1px 1px blue;

边框阴影
5个参数（水平偏移、垂直偏移、模糊值、外延值、颜色）
box-shadow: 10px 10px 10px 10px #ccc;

边框圆角
border-radius: 50%;

 设置或检索对象使用圆角边框。
 提供2个参数，2个参数以“/”分隔，每个参数允许设置1~4个参数值，第1个参数表示水平半径，第2个参数表示垂直半径，如第2个参数省略，则默认等于第1个参数
 水平半径：如果提供全部四个参数值，将按上左(top-left)、上右(top-right)、下右(bottom-right)、下左(bottom-left)的顺序作用于四个角。
 如果只提供一个，将用于全部的于四个角。
 如果提供两个，第一个用于上左(top-left)、下右(bottom-right)，第二个用于上右(top-right)、下左(bottom-left)。
 如果提供三个，第一个用于上左(top-left)，第二个用于上右(top-right)、下左(bottom-left)，第三个用于下右(bottom-right)。
 垂直半径也遵循以上4点。
 对应的脚本特性为borderRadius。
 如果相邻圆角的半径都被设置成了大于50%，那浏览器会根据图形的实际情况做一些计算。保证圆角能够刚好适应图形
边框图片
 <’ border-image-source ‘>： 设置或检索对象的边框是否用图像定义样式或图像来源路径。
 <’ border-image-slice ‘>： 设置或检索对象的边框背景图的分割方式。
 <’ border-image-width ‘>： 设置或检索对象的边框厚度。
 <’ border-image-outset ‘>： 设置或检索对象的边框背景图的扩展。
 <’ border-image-repeat ‘>： 设置或检索对象的边框图像的平铺方式。

复合写法：

border-image: url(images/border1.png) 27 fill/81px repeat;

背景
background-size
语法：
background-size: auto(原始图片大小) || number(数值) || percentage(百分比) || cover(放大铺满) || contain(缩小铺满)

1. 参数说明：
   a) auto：此值为默认值，保持背景图片的原始高度和宽度;
   b) number：此值设置具体的值，可以改变背景图片的大小;
   c) percentage：此值为百分值，可以是0%〜100%之间任何值，但此值只能应用在块元素上，所设置百分值将使用背景图片大小根据所在元素的宽度的百分比来计算。
   d) cover：此值是将图片放大，以适合铺满整个容器，这个主要运用在，当图片小于容器时，又无法使用background-repeat来实现时，我们就可以采用cover;将背景图片放大到适合容器的大小
   e) contain：此值刚好与cover相反，其主要是将背景图片缩小，以适合铺满整个容器，这个主要运用在，当背景图片大于元素容器时，而又需要将背景图片全部显示出来，此时我们就可以使用contain将图片缩小到适合容器大小为止。
   f) 当background-size取值为number和percentage时可以设置两个值，也可以设置一个值，当只取一个值时，第二个值相当于auto，但这里的auto并不会使背景图片的高度保持自己原始高度，而是会参照第一个参数值进行等比例缩放。
   background-origin:
2. 作用：background-origin 属性规定 background-position 属性相对于什么位置来定位。默认值是left top左上角
3. 语法：background-origin: padding-box|border-box|content-box;
4. 属性值说明：
   padding-box 背景图像相对于内边距框来定位。
   border-box 背景图像相对于边框盒来定位。
   content-box 背景图像相对于内容框来定位。
   background-clip:
5. background-clip 属性规定背景的绘制区：虽然是设置裁切，但是控制的是显示。说白了，就是设置最终显示那些区域
6. 语法：background-clip: border-box|padding-box|content-box;
7. 属性值说明：
   值 描述
   border-box 背景被裁剪到边框盒。
   padding-box 背景被裁剪到内边距框。
   content-box 背景被裁剪到内容框。

关键字：
增大相应区域
border: 20px dashed transparent;
padding: 20px;
background-clip:content-box;
background-origin:content-box;

综合
 <’ background-image ‘>： 指定对象的背景图像。可以是真实图片路径或使用渐变创建的“背景图像”
 <’ background-position ‘>： 指定对象的背景图像位置。
 <’ background-size ‘>： 指定对象的背景图像的尺寸大小。
 <’ background-repeat ‘>： 指定对象的背景图像如何铺排填充。
 <’ background-attachment ‘>： 指定对象的背景图像是随对象内容滚动还是固定的。
 <’ background-origin ‘>： 指定对象的背景图像显示的原点。
 <’ background-clip ‘>： 指定对象的背景图像向外裁剪的区域。
 <’ background-color ‘>： 指定对象的背景颜色。

拆分写法：
• background-image:url(test1.jpg),url(test2.jpg),url(test3.jpg);
• background-repeat:no-repeat,no-repeat,no-repeat;
• background-attachment:scroll,scroll,scroll;
• background-position:10px 20px,10px 20px,10px 20px;
• background-size:50px 60px,70px 90px,110px 130px;
• background-origin:content-box,content-box,content-box;
• background-clip:padding-box,padding-box,padding-box;
• background-color:#aaa;
复合写法：
• background:url(test1.jpg) no-repeat scroll 10px 20px/50px 60px padding-box,
• url(test1.jpg) no-repeat scroll 10px 20px/70px 90px padding-box,
• url(test1.jpg) no-repeat scroll 10px 20px/110px 130px padding-box #aaa;

颜色

RGBA：
R： 红色值。正整数 （0-255）| 百分数
G： 绿色值。正整数 （0-255）| 百分数
B： 蓝色值。正整数（0-255） | 百分数
A： Alpha透明度。取值0~1之间。

HSLA
H： Hue(色调)。0(或360)表示红色，120表示绿色，240表示蓝色，也可取其他数值来指定颜色。取值为：0 - 360
S： Saturation(饱和度)。取值为：0.0% - 100.0%
L： Lightness(亮度)。取值为：0.0% - 100.0%
A： Alpha透明度。取值0~1之间。
渐变
线性渐变

1. linear-gradient线性渐变指沿着某条直线朝一个方向产生渐变效果
   a) 语法：
   linear-gradient( [ || ,]? , [, ]* )
   b) 参数说明：
    第一个参数表示线性渐变的方向，
2. to left：设置渐变为从右到左。相当于: 270deg;
3. to right：设置渐变从左到右。相当于: 90deg;
4. to top：设置渐变从下到上。相当于: 0deg;
5. to bottom：设置渐变从上到下。相当于: 180deg。这是默认值，等同于留空不写。也可以直接指定度数，如45deg
    第二个参数是起点颜色,可以指定颜色的位置
    第三个参数是终点颜色，你还可以在后面添加更多的参数，表示多种颜色的渐变
   c) 示例：
   div{
   width: 400px;
   height: 400px;
   margin: 100px auto;
   background: linear-gradient(0deg,red,orange,yellow,green, #00ffff,blue,purple);
   }

径向渐变

1. radial-gradient径向渐变指从一个中心点开始沿着四周产生渐变效果
   a) 语法：
   = radial-gradient([ [ || ] [ at ]? , | at , ]?[ , ]+)
   b) 取值：
   i. 确定圆心的位置。如果提供2个参数，第一个表示横坐标，第二个表示纵坐标；如果只提供一个，第二值默认为50%，即center
   ii. shape：渐变的形状，ellipse表示椭圆形，circle表示圆形。默认为ellipse，如果元素形状为正方形的元素，则ellipse和circle显示一样
   iii. size：渐变的大小，即渐变到哪里停止，它有四个值。 closest-side：最近边； farthest-side：最远边； closest-corner：最近角； farthest-corner：最远角。默认是最远的角farthest-corner
   iv. ：指定颜色。Rgba hsla
   c) 一些案例示例代码：
   .div1{
   width: 200px;
   height: 200px;
   margin: 10px auto;
   /设置径向渐变效果:从中心点开始，从一种颜色到另外一种颜色/
   background: radial-gradient(circle at center,red,blue);
   }
   .div2{
   width: 200px;
   height: 200px;
   border-radius: 100px;
   margin: 10px auto;
   /设置径向渐变效果:从指定坐开始，从一种颜色到另外一种颜色/
   background: radial-gradient(circle at 50px 50px,#eeffff,#334455);
   }
   .div3{
   width: 200px;
   height: 200px;
   border-radius: 100px;
   margin: 10px auto;
   /设置径向渐变效果:从指定坐标开始，从一种颜色到另外一种颜色，同时指定颜色的位置/
   background: radial-gradient(circle at 50px 50px,#eeffff 0%,#666 70%,rgba(33,33,33,0.8) 80%);
   }
   /指定渐变的形状/
   .div4{
   width: 200px;
   height: 100px;
   margin: 10px auto;
   /设置径向渐变效果:从中心点开始，从一种颜色到另外一种颜色/
   background: radial-gradient(ellipse at center,red,green,blue);
   }
   /指定渐变的size/
   .div5{
   width: 200px;
   height: 100px;
   margin: 10px auto;
   /设置径向渐变效果:从中心点开始，从一种颜色到另外一种颜色,同时指定了大小为渐变到最近的边/
   background: radial-gradient(circle closest-side at center,red,green,blue);
   }
   /使用系统提供的位置设置/
   .div6{
   width: 200px;
   height: 100px;
   margin: 10px auto;
   /设置径向渐变效果:从右上角点开始，从一种颜色到另外一种颜色/
   background: radial-gradient(circle at top right,red,green,blue);
   }
   

过渡
语法：
transition: property duration timing-function delay;
参数说明：
transition 属性是一个简写属性，用于设置四个过渡属性：transition-property |transition-duration |transition-timing-function |transition-delay
值 描述
transition-property
规定设置过渡效果的 CSS 属性的名称。
transition-duration
规定完成过渡效果需要多少秒或毫秒。
transition-timing-function
规定速度效果的速度曲线。
transition-delay
定义过渡效果何时开始。

补充说明tansition-timing-function: 属性规定过渡效果的速度曲线
值 描述
linear 规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。
ease 规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。
ease-in 规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。
ease-out 规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。
ease-in-out 规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。
cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。

转换
通过 CSS3 transform转换，我们能够对元素进行移动、缩放、转动、拉长或拉伸
位移
2D移动：translate()。使用translate()函数，你可以把元素从原来的位置移动。移动参照元素左上角原点
a) 语法：translate(tx) | translate(tx,ty)
b) tx是一个代表X轴（横坐标）移动的向量长度，当其值为正值时，元素向X轴右方向移动，反之其值为负值时，元素向X轴左方向移动。
c) ty是一个代表Y轴（纵向标）移动的向量长度，当其值为正值时，元素向Y轴下方向移动，反之其值为负值时，元素向Y轴上方向移动。如果ty没有显式设置时，相当于ty=0。
d) 也可以使用translateX(tx) 或者 translateY(ty)

旋转
2D旋转：rotate()：旋转rotate()函数通过指定的角度参数对元素根据对象原点指定一个2D旋转。它主要在二维空间内进行操作，接受一个角度值，用来指定旋转的幅度。如果这个值为正值，元素相对原点中心顺时针旋转；如果这个值为负值，元素相对原点中心逆时针旋转
a) 语法：rotate(a);
b) a: 代表的是一个旋转的角度值。其取值可以是正的，也可以是负的。如果取值为正值时，元素默认之下相对元素中心点顺时针旋转；如果取值为负值时，元素默认之下相对元素中心点逆时针旋转

缩放
2D缩放：scale()：缩放scale()函数让元素根据中心原点对对象进行缩放。默认的值1。因此0.01到0.99之间的任何值，使一个元素缩小；而任何大于或等于1.01的值，让元素显得更大.缩放是参照元素中心点。
a) 语法：scale(sx|ty) | scale(sx,sy)
b) sx：用来指定横向坐标（X轴）方向的缩放向量，如果值为0.01~0.99之间，会让对象在X轴方向缩小，如果值大于或等于1.01，对象在Y轴方向放大。
c) sy：用来指定纵向坐标（Y轴）方向的缩放量，如果值为0.01~0.99之间，会让对象在Y轴方向缩小，如果值大于或等于1.01，对象在Y轴方向放大
d) 也可以使用scaleX(sx) 或者scaleY(sy)

斜切
2D斜切：skew()：能够让元素倾斜显示。它可以将一个对象以其中心位置围绕着X轴和Y轴按照一定的角度倾斜。这与rotate()函数的旋转不同，rotate()函数只是旋转，而不会改变元素的形状。skew()函数不会旋转，而只会改变元素的形状
a) 语法：skew(ax) | skew(ax,ay)
b) ax：用来指定元素水平方向（X轴方向）倾斜的角度。
c) ay：用来指定元素垂直方向（Y轴方向）倾斜的角度。如果未显式的设置这个值，其默认为０。
也可以使用skewX(sx) 或者 skewY(sy)
转换的中心位置
transform-origin：
设置或检索对象以某个原点进行转换。
该属性提供2个参数值。
如果提供两个，第一个用于横坐标，第二个用于纵坐标。
如果只提供一个，该值将用于横坐标；纵坐标将默认为50%
透视
给父元素加上透视，子元素发生3d转换的时候才有效果
transform-style: preserve-3d
景深，远小近大。（可以理解为设置人和物体的位置）
perspective：1px
透视点的位置-相对于屏幕的
perspective-origin：（x，y）
left top center bottom right px %

动画
动画是CSS3中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果.

1. 必要元素：
   a、通过@keyframes指定动画序列；自动补间动画，确定两个点，系统会自动计算中间过程。这两个点就称为关键帧。我们可以设置多个关键帧
   b、通过百分比将动画序列分割成多个节点；
   c、在各节点中分别定义各属性
   d、通过animation将动画应用于相应元素；

2. animation样式常用属性：
   a) 动画序列的名称:animation-name: move;
   b) 动画的持续时间:animation-duration: 1s;
   c) 动画的延时:animation-delay: 1s;
   d) 播放状态:animation-play-state: paused|running;
   e) 播放速度:animation-timing-function: linear;
   动画速率曲线： linear：匀速 ease：动画以低速开始，然后加快，在结束前变慢 ease-in：动画以低速开始 ease-out：动画以低速结束 ease-in-out：动画以低速开始和结束

f) 播放次数 反复:animation-iteration-count: 1;
循环播放：infinite
g) 动画播放完结后的状态:animation-fill-mode: forwards;
none： 默认值。不设置对象动画之外的状态
forwards： 设置对象状态为动画结束时的状态
backwards： 设置对象状态为动画开始时的状态
both： 设置对象状态为动画结束或开始的状态
h) 循环播放时，交叉动画:animation-direction: alternate;
normal： 正常方向
reverse： 反方向运行
alternate： 动画先正常运行再反方向运行，并持续交替运行
alternate-reverse： 动画先反运行再正方向运行，并持续交替运行