H5新特性
1.语义化标签：header、footer、section、nav、aside、article
2.增强型表单：input 的多个 type
3.新增表单元素：datalist、keygen、output
4.新增交互表单属性：placehoder、required、min 和 max
5.音频视频：audio、video
6.canvas
7.地理定位
8.拖拽
9.web存储
10.新事件：onresize、ondrag、onscroll、onmousewheel、onerror、onplay、onpause
11.WebSocket：单个 TCP 连接上进行全双工通讯的协议
语义化标签
增强型表单
新增表单元素
新增表单属性
音频视频
HTML5 规定了在网页上嵌入音频元素的标准，即使用 <audio> 元素。
HTML5 规定了一种通过 video 元素来包含视频的标准方法
canvas
HTML5 <canvas> 元素用于图形的绘制，通过脚本 (通常是JavaScript)来完成.
<canvas> 标签只是图形容器，必须使用脚本来绘制图形。
canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成
地理定位
HTML5 Geolocation API 用于获得用户的地理位置。
鉴于该特性可能侵犯用户的隐私，除非用户同意，否则用户位置信息是不可用的。
拖拽
拖拽是一种常见的特性，即抓取对象以后拖到另一个位置。在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放。
设置元素为可拖放
为了使元素可拖动，把 draggable 属性设置为 true
web存储
sessionStorage—客户端数据存储，只能维持在当前会话范围内。
sessionStorage 方法针对一个 session 进行数据存储。当用户关闭浏览器窗口后，数据会被删除。
localStorage—客户端数据存储，能维持在多个会话范围内。
localStorage 对象存储的数据没有时间限制。第二天、第二周或下一年之后，数据依然可用。
对于大量复杂数据结构，一般使用IndexDB
新事件
css3
1.选择器
2.背景和边框
3.文本效果
4.2D/3D 转换
5.动画、过渡
6.用户界面
选择器
:last-child /* 选择元素最后一个孩子 */
:first-child /* 选择元素第一个孩子 */
:nth-child(1) /* 按照第几个孩子给它设置样式 */
:nth-child(even) /* 按照偶数 */
:nth-child(odd) /* 按照奇数 */
:disabled /* 选择每个禁用的E元素 */
:checked /* 选择每个被选中的E元素 */
:not(selector) /* 选择非 selector 元素的每个元素 */
::selection /* 选择被用户选取的元素部分 */
伪类选择器：
:last-child /* 选择元素最后一个孩子 */
:first-child /* 选择元素第一个孩子 */
:nth-child(1) /* 按照第几个孩子给它设置样式 */
a:link {color: #FF0000}/* 未访问的链接 */
a:visited {color: #00FF00}/* 已访问的链接 */
a:hover {color: #FF00FF}/* 鼠标移动到链接上 */
a:active {color: #0000FF}/* 选定的链接 */
伪元素：创建了 html 中不存在的元素，用于将特殊的效果添加到某些选择器
::before {}/* 选择器在被选元素的前面插入内容和定义css，使用 content 属性来指定要插入的内容。 */
::after {}/* 选择器在被选元素的后面插入内容和定义css，使用 content 属性来指定要插入的内容。 */
:first-letter /* 选择该元素内容的首字母 *
/:first-line /* 选择该元素内容的首行 */
::selection /* 选择被用户选取的元素部分 */
背景和边框
背景：
background-size：规定背景图片的尺寸（cover：填充；100% 100%：拉伸）
background-origin：规定背景图片的定位区域
对于 background-origin 属性，有如下属性
背景图片可以放置于 content-box、padding-box 或 border-box 区域
边框：
border-radius：圆角
box-shadow / text-shadow：阴影
border-image：边框图片
文本效果
2D/3D 转换
2D 转换（transform）
1.translate()：元素从其当前位置移动，根据给定的 left（x 坐标） 和 top（y 坐标） 位置参数。 transform: translate(50px, 100px);
2.rotate()：元素顺时针旋转给定的角度。若为负值，元素将逆时针旋转。transform: rotate(30deg);
3.scale()：元素的尺寸会增加或减少，根据给定的宽度（X 轴）和高度（Y 轴）参数，也可以一个值（宽高）。transform: scale(2,4);
4.skew()：元素翻转给定的角度，根据给定的水平线（X 轴）和垂直线（Y 轴）参数。transform: skew(30deg, 20deg);
5.matrix()： 把所有 2D 转换方法组合在一起，需要六个参数，包含数学函数，允许您：旋转、缩放、移动以及倾斜元素。6.transform:matrix(0.866,0.5,-0.5,0.866,0,0);
3D 转换
1.rotateX()：元素围绕其 X 轴以给定的度数进行旋转。transform: rotateX(120deg);
2.rotateY()：元素围绕其 Y 轴以给定的度数进行旋转。transform: rotateY(130deg);
3.perspective：规定 3D 元素的透视效果
动画、过渡
过渡效果（transition），使页面变化更平滑，以下参数可直接写在 transition 后面
1.transition-property ：执行动画对应的属性，例如 color，background 等，可以使用 all 来指定所有的属性。
2.transition-duration：过渡动画的一个持续时间。
3.transition-timing-function：在延续时间段，动画变化的速率，常见的有：ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier
4.transition-delay：延迟多久后开始动画
动画（animation）
先定义 @keyframes 规则（0%，100% | from，to）
然后定义 animation，以下参数可直接写在 animation 后面
1.animation-name: 定义动画名称
2.animation-duration: 指定元素播放动画所持续的时间长
3.animation-timing-function: ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(, , , )： 指元素根据时间的推进来改变属性值的变换速率，即动画的播放方式
4.animation-delay: 指定元素动画开始时间
5.animation-iteration-count: infinite | number：指定元素播放动画的循环次数
6.animation-direction: normal | alternate： 指定元素动画播放的方向，其只有两个值，默认值为normal，如果设置为 normal 时，动画的每次循环都是向前播放；另一个值是 alternate，规定动画在下一周期逆向地播放（来去播放）
7.animation-play-state: running | paused ：控制元素动画的播放状态
用户界面
CSS3中，新的用户界面特性包括重设元素尺寸、盒尺寸以及轮廓等
resize
box-sizing
outline-offset
resize 属性规定是否可由用户调整元素尺寸。如果希望此属性生效，需要设置元素的 overflow 属性，值可以是 auto、hidden 或 scroll
box-sizing 属性可设置的值有 content-box、border-box 和 inherit
content-box 是W3C的标准盒模型，元素宽度 = 内容宽度 + padding + border：意思是 padding 和 border 会增加元素的宽度，以至于实际上的 width 大于原始设定的 width
border-box 是ie的怪异盒模型，元素宽度 = 设定的宽度，已经将 padding 和 border 包括进去了，比如有时候在元素基础上添加内距 padding 或 border 会将布局撑破，但是使用 border-box 就可以轻松完成
inherit：规定应从父元素继承 box-sizing 属性的值
outline-offset 属性对轮廓进行偏移，并在超出边框边缘的位置绘制轮廓
CSS 兼容内核
-moz-：代表FireFox浏览器私有属性
-ms-：代表IE浏览器私有属性
-webkit-：代表safari、chrome浏览器私有属性
-o-：代表opera浏览器私有属性
