1 HTML5 音视频标签
1.1 音视频标签
| 标签名 | 功能和语义 | 属性 | 单标签or双标签 | 备注 |
|---|---|---|---|---|
| video | 引入视频 | src：视频地址 controls：播放控制条，无需给值 width：设置视频宽度 height：设置视频高度 muted：打开时静音，无需给值 autoplay：打开时自动播放，无需给值 loop：循环播放，无需给值 preload：预加载，无需给值 poster：设置视频封面，值为封面图片的地址 |
双标签 | chrome浏览器：设置了muted的视频才能autoplay |
| audio | 引入音频 | src：视频地址 controls：播放控制条，无需给值 muted：打开时静音，无需给值 autoplay：打开时自动播放，无需给值 loop：循环播放，无需给值 preload：预加载，无需给值 |
双标签 | chrome浏览器：无论是否设置muted，音频都不能自动播放 |
| source | 设置视频或视频文件地址 | src： 指定音频或视频文件的地址。 type： 指定视频或视频文件的类型。 |
单标签 | 在vedio和audio标签中嵌套source标签，设置多种音视频格式，以保证能兼容各种类型的浏览器。 |
注：默认音视频在播放时才会加载，设置了
preload则在页面打开时就加载。
1.2 浏览器支持的音视频格式
视频格式：mp4（推荐）、webm、ogg
音频格式：mp3（推荐）、wav、ogg
2 HTML5 新增全局属性
| 属性名 | 功能 | 属性值 | 备注 |
|---|---|---|---|
| hidden | 隐藏元素 | 无需给值 | 效果同display:none; |
| contenteditable | 元素内容可编辑 | true：可编辑，默认值 false：不可编辑 |
3 HTML5 兼容性方案
H5新增的语法需要IE9以及以上浏览器和非IE的支持。为了提高兼容性，可以：
3.1 设置元信息 meta
3.2 引入 html5shiv.js
4 CSS3
4.1 CSS3 基本语法
4.1.1 CSS3 浏览器私有前缀
某些属性在一些浏览器版本上需要添加对应的私有前缀才能够使用。各浏览器对应的私有前缀如下：
-webkit- chrome和safari以及以chrome为内核的浏览器
-moz- firefox浏览器
-ms- IE 浏览器（不包括Edge）
-o- Opera 浏览器
4.1.2 CSS3 新增长度单位
rem 根元素字体大小的倍数
vw 视口宽度的百分之几（vw:viewport width）
vh 视口高度的百分之几（vh:viewport height）
vmax 视口宽高中较大者的百分之几
vmin 视口宽高中较小者的百分之几
4.1.3 CSS3 新增颜色设置方式
rgba(0~255,0~255,0~255,0~1) 常用，a为alpha值，代表不透明度opacity，值越大不透明度越高
hsl(0~360,0~100%,0~100%) 不常用，h:hue色相，s:saturation饱和度，l:lightness亮度
hsla(0~360,0~100%,0~100%,0~1) 不常用，a为alpha值，代表不透明度
4.2 CSS3 选择器
4.2.1 基本选择器（6个）
标签名选择器、类名选择器、ID选择器、全局（通配）选择器、并集选择器、交集选择器
4.2.2 层级选择器（4个）
后代元素选择器、子元素选择器、后面相邻兄弟选择器、后面兄弟选择器
后面相邻兄弟选择器：选择选择器1后面相邻的第一个选择器2兄弟
选择器1+选择器2 {
}
后面兄弟选择器：选择选择器1后面的所有选择器2兄弟
选择器1~选择器2 {
}
4.2.3 属性选择器（5个）
[属性名] 选择具有指定属性名的元素
[属性名=“值”] 选择指定属性值的元素
[属性名^="值"] 选择属性值以某个值开头的元素
[属性名$="值"] 选择属性值以某个值结尾的元素
[属性名*=“值”] 选择属性值包含某个值的元素
属性选择器常与其他选择器一起组合使用，属性选择器也可以多个组合使用，如：
/*选择具有alt属性且width属性中含有0的img标签*/
img[alt][width*="0"]{
}
4.2.4 伪类选择器（23个）
① 动态伪类选择器（5个）
:link 选择地址未被访问过的超链接
:visited 选择地址被访问过的超链接
:hover 选择鼠标悬停在上面的元素
:active 选择鼠标按住未松开的元素
:focus 选择已获取焦点的元素
② 目标伪类选择器 （1个）
可用于做一些交互效果。
:target 选择锚点指向的元素（即id名为某一时刻url中的锚点名的元素）
③ 语言伪类选择器 （1个）
:lang(语言种类) 选择指定语言
④ UI元素伪类选择器（3个）
:checked 选择被选中的单选按钮/复选框/下拉选项
:enabled 选择可用的表单控件（未设置disabled属性的控件均可用）
:disabled 选择不可用的表单控件（设置disabled属性的控件均不可用）
⑤ 结构伪类选择器（12个）
:first-child 选择所有兄弟元素中的第一个
:last-child 选择所有兄弟元素中的最后一个
:nth-child(n) 选择所有兄弟元素中的第n个
:nth-last-child(n) 选择所有兄弟元素中的倒数第n个
:only-child 选择没有兄弟元素的元素
:first-of-type 选择同类型兄弟元素中的第一个
:last-of-type 选择同类型兄弟元素中的最后一个
:nth-of-type(n) 选择同类型兄弟元素中的第n个
:nth-last-of-type(n) 选择同类型兄弟元素中的倒数第n个
:only-of-type 选择没有同类型兄弟元素的元素
:root 选择根元素（html）
:empty 选择内容为空且无后代的元素，eg.
⑥ 否定伪类选择器（1个）
:not(选择器名) 选择不是括号中选择器的选择器
4.2.5 伪元素选择器（6个）
E::first-letter / E:first-letter 选择元素E中的第一个文字
E::first-line / E:first-line 选择元素E中的第一行文字
E::before / E:before 在元素E中的第一个位置创建一个子元素
E::after / E:after 在元素E中的最后一个位置创建一个子元素
E::selection 给元素E被选中的文字设置样式
E::placeholder 给元素E中的文字提示设置样式
注：
1、
E::before、E::after需配合content属性才能生效2、前四个伪元素选择器可写一个冒号，也可写两个冒号
4.2.6 选择器的权重（优先级）
ID选择器 > 类名选择器、伪类选择器、属性选择器 > 标签名选择器、伪元素选择器 > 全局选择器
4.3 CSS3 新增盒子模型相关样式
4.3.1 box-sizing 属性（盒子大小）
规定width和height设置的是盒子内容的宽高还是盒子总宽高。值：
content-box 默认值，内容宽高
border-box 盒子总宽高（设置盒子为IE的怪异模式）
4.3.2 box-shadow 属性（盒子阴影）
给盒子添加阴影效果，值设置规则如下：
box-shadow: 10px 10px; /* 只设置阴影的偏移位置，水平向右偏移10px，垂直向下偏移10px */
box-shadow：10px 10px #ccc; /* 设置阴影的偏移位置、颜色 */
box-shadow: 10px 10px 5px #ccc; /*设置偏移位置、模糊值、颜色*/
box-shadow: 10px 10px 5px 10px #ccc; /*设置偏移位置、模糊值、外延值、颜色*/
box-shadow: 10px 10px 5px 10px #ccc inset; /*设置偏移位置、模糊值、外延值、颜色、内阴影*/
注：
box-shadow的值至少为2个（水平、垂直偏移位置），至多为4个，顺序固定为：水平偏移、垂直偏移、模糊值、外延值。
可给一个盒子同时设置多个阴影，每个阴影之间用逗号隔开：
/* 设置多个阴影 */
box-shadow: 2px 0 5px cyan,
0 -2px 5px #f90,
0 2px 5px purple,
-2px 0 5px pink;
4.3.4 opacity 属性（不透明度）
设置盒子的整体不透明度，值是0到1之间的小数，数字越大越不透明，1完全不透明，0完全透明。
4.4 CSS3 新增背景属性
4.4.1 background-origin
设置背景图像定位的原点位置，值如下：
padding-box 默认值，原点在元素内边距的左上角
border-box 原点在元素边框的左上角
content-box 原点在元素内容的左上角
4.4.2 background-clip
设置哪些区域的背景图像可见（又即哪些区域的背景图像被裁掉），值如下：
border-box 默认值，边框、内边距、内容上的背景图像可见（裁掉边框外的背景图像）
padding-box 内边距、内容上的背景图像可见（裁掉内边距外的背景图像）
content-box 内容上的背景图像可见（裁掉内容外的背景图像）
text 文字上的背景图像可见（裁掉文字外的背景图像）（条件：需加私有前缀且文字为透明）
-webkit-background-clip:text;/* 加私有前缀，且设置文字上的背景图像可见 */
color:transparent;/* 设置文字颜色为透明 */
4.4.3 background-size
调整背景图像的尺寸，两种值的设置方式：
指定两个长度设置背景图像尺寸：
background-size: 100px 100px;/* 宽 高 */
background-size: 100% 100%;/* 宽参照元素宽度 高参照元素高度 */
background-size: 100px;/* 宽为100px 高按图片比例自动计算 */
使用关键字设置背景图像尺寸：
contain 保证图片比例，优先保证整个图像显示完整，可能造成元素部分区域没有图像
cover 保证图片比例，优先保证元素每个地方都有图像，可能造成背景图像显示不完整，推荐使用
4.4.4 background 复合属性
-
background-origin和background-clip值的形式是一样的，复合属性中：只写一个值，表示同时设置两个属性；写两个值，前为
origin，后为clip。 如果复合属性需要同时设置
position和size，两个必须写在一起，且中间使用 / 分开。
background: url(../images/bg03.jpg) no-repeat content-box border-box 10px 10px/50% 50%;/* 以内容左上角为定位原点，边框外的背景图像不可见，该背景图像距离定位原点水平向右10px，垂直向下10px，宽为元素宽度的50%，高为元素高度的50%*/
background: url(../images/bg03.jpg) no-repeat content-box border-box 10px 10px/cover;/* 以内容左上角为定位原点，边框外的背景图像不可见，该背景图像距离定位原点水平向右10px，垂直向下10px，图像铺满元素，但有可能显示不完整*/
4.4.5 多背景图
CSS3 允许在一个元素上设置多个背景图，每个背景图之间用逗号隔开。
background: url(../images/bg-tl.png) no-repeat,
url(../images/bg-tr.png) no-repeat right top,
url(../images/bg-bl.png) no-repeat left bottom,
url(../images/bg-br.png) no-repeat right bottom;