HTML5和CSS3新增内容

CSS3选择器有哪些？

属性选择器、伪类选择器、伪元素选择器。

CSS3新特性有哪些？

1. 颜色：新增RGBA，HSLA模式
2. 文本效果

text-align-last 设置如何对齐最后一行或紧挨着强制换行符之前的行。
text-emphasis 向元素的文本应用重点标记以及重点标记的前景色。
text-justify 规定当 text-align 设置为 “justify” 时所使用的对齐方法。
text-outline 规定文本的轮廓。
text-overflow 规定当文本溢出包含元素时发生的事情。
text-shadow 向文本添加阴影。
text-wrap 规定文本的换行规则。
word-wrap 允许对长的不可分割的单词进行分割并换行到下一行。

3. 边框：

圆角：border-radius
边框阴影： box-shadow
将图片规定为包围 div 元素的边框：border-image

4. 盒子模型：box-sizing
5. 背景：

background-size 设置背景图片的尺寸
background-origin 设置背景图片的原点
background-clip 设置背景图片的裁切区域，以”，”分隔可以设置多背景，用于自适应布局

6. 渐变：linear-gradient、radial-gradient
7. 过渡：transition，可实现动画
8. 在CSS3中唯一引入的伪元素是 ：selection.
9. 媒体查询，多栏布局
10. border-image
11. 2D转换

matrix(n,n,n,n,n,n) 定义 2D 转换，使用六个值的矩阵。
translate(x,y) 定义 2D 转换，沿着 X 和 Y 轴移动元素。
translateX(n) 定义 2D 转换，沿着 X 轴移动元素。
translateY(n) 定义 2D 转换，沿着 Y 轴移动元素。
scale(x,y) 定义 2D 缩放转换，改变元素的宽度和高度。
scaleX(n) 定义 2D 缩放转换，改变元素的宽度。
scaleY(n) 定义 2D 缩放转换，改变元素的高度。
rotate(angle) 定义 2D 旋转，在参数中规定角度。
skew(x-angle,y-angle) 定义 2D 倾斜转换，沿着 X 和 Y 轴。
skewX(angle) 定义 2D 倾斜转换，沿着 X 轴。
skewY(angle) 定义 2D 倾斜转换，沿着 Y 轴。

12. 3D转换

matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) 定义 3D 转换，使用 16 个值的 4x4 矩阵。
translate3d(x,y,z) 定义 3D 转化。
translateX(x) 定义 3D 转化，仅使用用于 X 轴的值。
translateY(y) 定义 3D 转化，仅使用用于 Y 轴的值。
translateZ(z) 定义 3D 转化，仅使用用于 Z 轴的值。
scale3d(x,y,z) 定义 3D 缩放转换。
scaleX(x) 定义 3D 缩放转换，通过给定一个 X 轴的值。
scaleY(y) 定义 3D 缩放转换，通过给定一个 Y 轴的值。
scaleZ(z) 定义 3D 缩放转换，通过给定一个 Z 轴的值。
rotate3d(x,y,z,angle) 定义 3D 旋转。
rotateX(angle) 定义沿 X 轴的 3D 旋转。
rotateY(angle) 定义沿 Y 轴的 3D 旋转。
rotateZ(angle) 定义沿 Z 轴的 3D 旋转。
perspective(n) 定义 3D 转换元素的透视视图。

13. 自定义动画

CSS3新增伪类有那些？

1. p:first-of-type 指定父元素的第一个p元素
2. p:last-of-type 指定父元素的最后一个p元素
3. p:only-of-type 指定属于父元素的特定类型的唯一子元素的每个 p 元素
4. p:only-child 规定属于其父元素的唯一子元素的每个 p 元素
5. p:nth-child(2) 规定属于其父元素的第二个子元素的每个 p
6. :enabled :disabled 控制表单控件的禁用状态
7. :checked 控制单选框或复选框被选中状态

HTML5新特性

1. 拖拽释放(Drag and drop) API
2. 语义化更好的内容标签

• 结构标签： header、nav、footer、aside、article、section
• 新增标签： datalist（定义选项列表）、details（定义文档细节，通常与summary使用）、menu（定义列表/菜单）、address、progress（进度条，有两个值：value、max）、mark（标记）、time（时间）
• 新增表单元素type： email、url、tel、number（min、max、step）、range（进度条）、color（颜色面板）、search、calendar、date、time、email
• 属性： form、autocomplete、autofocus、method、action、multiple、pattern、placeholder、required、contenteditable、hidden、tableindex

3. 音频、视频API(audio,video)
4. 画布(Canvas) API
5. 地理(Geolocation) API
6. 本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失
7. sessionStorage 的数据在浏览器关闭后自动删除
8. 新的技术webworker, websocket, Geolocation支持HTML5新标签：

处理html5新标签与浏览器兼容性问题：

（1）、使用document创建标签
（2）、a）使用html5shim：在中调用以下代码：
        1.
        
       b）使用kill IE6: 在之前调用以下代码：
        1.