有时会遇到判断新标签、属性的题目，没找到适合应试的，所以自己来收集总结一下，只列举那些现在兼容性尚可（IE10支持）的新属性及其基本功能（以w3school为准）。感觉玩w3school资料更新不是很及时，要是很关心一个属性的兼容性问题可以上caniuse去查一下，很好用。本文中“+”表示大于等于。
HTML5新增标签
格式：
定义有记号的文本
支持：IE9+
~~~
定义任何类型的任务的进度
支持：IE10+
max:number 规定任务一共要做多少工作
value:number 规定已经完成了多少任务
这两个值之比就是图上蓝色和总条的比例
定义ruby注释
支持：IE9+
图像：
定义图形
支持：IE9+
height:number 设置canvas的高度
width:number 设置canvas的宽度
大多数Canvas绘图API都没有定义在元素本身上，而是定义在通过画布的getContext()方法获
得的一个“绘图环境”对象上
支持：IE9+
支持：IE9+
音频/视频：
定义HTML5声音内容，比如音乐或其他音频
支持：IE9+
在开始标签和结束标签之间放置文本内容，这样老的浏览器就可以显示出不支持该标签的内容；
autoplay:如果出现该属性，则音频在就绪后马上播放
controls:如果出现该属性，则向用户显示控件，比如播放按钮
loop:如果出现该属性，则每当音频结束时重新开始播放
muted:IE10+规定视频输出应该被静音
preload:如果出现该属性，则音频在页面加载时进行加载，并预备播放。如果同时存在autoplay则忽略该属性
src:要播放的音频的URL
为或定义媒体资源，当有多个资源时，浏览器选择它支持的文件（兼容性处理）
支持：IE9+
src:规定媒体文件的url
type:规定媒体资源的MIME类型：视频：video/ogg，video/mp4，video/webm；音频：audio/ogg，
audio/mpeg；
定义HTML5视频
支持：IE9+
autoplay:如果出现该属性，则视频在就绪后马上播放
controls:如果出现该属性，则向用户展示控件，比如播放按钮
height:设置视频播放器的高度
loop:如果出现该属性，则当媒介文件完成后再次开始播放
muted:IE10+规定视频的音频输出应该被静音
poster:规定视频下载时显示的图像，或者在用户点击播放按钮前显示的图像
preload:如果出现了该属性，则视频在网页加载时进行加载，并预备播放。如果使用autoplay则自动忽
略该属性
src:要播放视频的url
width:设置视频播放器的宽度
结构：
支持：IE9+
支持：IE9+
编程：
为外部应用程序（非HTML）定义容器
height:设置嵌入内容的高度
src:嵌入内容的URL
type:定义嵌入内容的类型
width:设置嵌入内容的宽度
HTML5新增全局属性
spellcheck是否进行拼写检查的属性；如果不符合语法会有红色下划线
支持：IE10+
这是一个段落。
draggable属性规定元素是否可以拖动
支持：IE9+
图像、链接默认是可以拖动的
这是一个可拖动的段落。
contenteditable 规定元素的内容是否可编辑
这是一个可编辑的段落。
CSS3新增属性
动画属性：
animation除了animation-play-state属性外的动画属性的缩写
（顺序-name、-duration、-timing-function
、-delay、-iteration-count、-direction）
支持：IE10+
animation-name规定@keyframes动画的名称
支持：IE10+
animation-duration规定动画完成一个周期所花费的秒或毫秒
支持：IE10+
animation-timing-function规定动画的速度曲线
支持：IE10+
linear动画从头到尾速度相同
ease默认。动画以低速开始，然后加快，在结束前变慢。
ease-in动画以低速开始
ease-out动画以低速结束
ease-in-out动画以低速开始和结束
cubic-bezier(n,n,n,n)贝塞尔曲线，可以自定义动画运行速率
animation-delay规定动画合适开始
支持：IE10+
animation-iteration-count规定动画被播放的次数
支持：IE10+
animation-direction规定动画在下一周期是否逆向的播放
支持：IE10+
normal正常播放
alternate动画应该轮流反向播放
animation-play-state规定动画是否在运行或暂停
支持：IE10+
paused动画已暂停
running正在播放
animation-fill-mode规定对象动画时间之外的状态
支持：IE10+
none不改变默认行为
forwards保持最后一个属性值
backwards在animation-delay所指定的一段时间内，在动画显示之前，应用开始属性值
both向前和向后填充模式都被应用
背景属性：
background-clip规定背景的绘制区域
支持：IE9+
border-box背景被剪裁到边框盒
padding-box背景被剪裁到内边距框
content-box背景被剪裁到内容框
background-origin相对于内容框来定位背景图像
支持：IE9+
padding-box背景图像相对于内边距来定位
border-box背景图像相对于边框盒来定位
content-box背景图像相对于内容框来定位
边框属性：
border-bottom-left-radius向左下角添加圆角边框（长度值和百分比），剩下三个同理
支持：IE9+
border-radius简写属性，设置所有四个radius属性
支持：IE9+
box-shadow向框添加一个或多个阴影
支持：IE9+
用法：box-shadow: h-shadow v-shadow blur spread color inset;
h-shadow水平阴影的位置，允许负值
v-shadow垂直阴影的位置，允许负值
blur可选，模糊距离
spread可选，阴影尺寸
color可选，阴影的颜色
inset可选，将外部阴影改成内部阴影
Box属性：
overflow-x如果内容溢出了元素内容区域，是否对内容的左右边缘进行剪裁
overflow-y如果内容溢出了元素内容区域，是否对内容的上下边缘进行剪裁
visible不剪裁内容，可能会显示在内容框之外
hidden剪裁内容，不提供滚动机制
scroll剪裁内容，提供滚动机制
auto如果溢出框，则提供滚动机制
no-display如果内容不适合内容框，则删除整个框
no-content如果内容不适合内容框，则隐藏整个内容
Color属性：
opacity设置元素的不透明度，0为完全透明，1为完全不透明
文本属性：
text-overflow设置文字溢出时的处理
clip修剪文本
ellipsis显示省略符号来代表被修剪的文本
string使用给定的字符串来代表被修剪的文本
text-shadow显示文本的阴影效果
支持：IE10+
用法：text-shadow: h-shadow v-shadow blur color;
h-shadow水平阴影的位置，允许负值
v-shadow垂直阴影的位置，允许负值
blur可选，模糊的距离
color可选，阴影的颜色
过渡属性：
transition过渡效果的缩写
支持：IE10+
用法：transition: property duration timing-function delay;
transition-property过渡效果的css属性名称
transition-duration过渡效果需要多少秒或者毫秒
transition-timing-function规定速度效果的速度曲线
transition-delay定义过渡效果何时开始
值类似上面动画
2D/3D转换：
transform变换
支持：IE10+
用法：transform: none|transform-functions;
transform-origin设置旋转元素的基点位置
支持：IE10+
用法：transform-origin: x-axis y-axis z-axis;
x-axis被置于x轴的何处，可能的值left、center、right、length、%
y-axis被置于y轴的何处
z-axis被置于z轴的何处
transform-property规定应用过渡效果的css属性名称
支持：IE10+
用法：transition-property: none|all|property;
Flex属性
flex属性用于设置或检索弹性盒模型对象的子元素如何分配空间
支持：IE11+，IE10加-ms-前缀
flex: flex-grow flex-shrink flex-basis|auto|initial|inherit;
flex-grow元素相对扩展的量，都是1则等分
flex-shrink元素相对缩放的量
flex-basis元素的长度
auto等价于1 1 auto
none等价于0 0 none
initial设置为默认值，0 1 auto
inherit从父元素继承
flex布局现在很火，这是它目前国内的兼容性
2338
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
