Atitit html5.1 新特性attilax总结
Attilax觉得还不错的心特性
9. 嵌入 header 和 footer
HTML5.1 允许你在另一个 header 嵌入 header 和 footer。你可以向头部元素添加一个 header 或 footer ，假如它们在段落内容里包含它们自己。假如你想添加详细阐述诸如 <section> 和 <article> 标签到语义段落元素，这个特性将变得非常有用。
在下面的代码中，<article> 标签包含一个 <header> 标签，它有个自身包含 <header> 标签的 <aside> 标签。
7. 校验表单
新的 reportValidity() 方法允许你校验一个表单和重置结果，并且在浏览器适合位置向用户报告错误。用户代理可以报告一个以上的限制规则，假如单一元素同时遇到多个问题。对于这种情况，“密码”输入为必填内容但没有填，将会标识为错误。
6. 浏览器的上下文菜单
1. 响应式图像
W3C 引入了一些功能特性，无需使用 CSS 就可以实现响应式图像。它们是 …
srcset 图像属性
srcset 属性让你可以指定一个多个可选的图像来源，对应于不同的像素分辨率。它将允许浏览器根据用户设备的不同选择合适质量的实现来进行显示。例如，对于使用网络比较慢的移动设备的用户，显示一张低分辨率的图片会比较好。
你可以使用 srcset 属性并且带上它自有的 x 修饰符来描述每一个图片的像素比例, 如果用户的像素比例等于 3，就会显示 high-res 这张图片。
<img src="clicks/low-res.jpg" srcset="
clicks/low-res.jpg 1x,
clicks/medium-res.jpg 2x,
clicks/high-res.jpg 3x"
>
除了像素比例之外，你也可以选择使用 w 修饰符来指定不同尺寸大小的图片。在如下示例中，high-res 图片被定义成在宽度为 1600px 时显示。
<img src="clicks/low-res.jpg" srcset="
clicks/low-res.jpg 500w,
clicks/medium-res.jpg 1000w,
clicks/high-res.jpg 1600w"
>
leoxu
翻译于 1个月前
0人顶
顶 翻译得不错哦！
sizes 图像属性
大多数时候创作者们都喜欢针对不同的屏幕尺寸显示不同的图片。这个可以用 sizes 属性做到。它让你可以针对分配给图像显示的空间大小来对宽度做出调整, 然后使用 srcset 属性来挑选合适的图片来显示。例如…
<img src="clicks/low-res.jpg" sizes="(max-width: 25em) 60vw, 100vw"
srcset="clicks/low-res.jpg 500w,
clicks/medium-res.jpg 1000w,
clicks/high-res.jpg 1600w"
>
在这里， sizes 属性定义了在视窗大于 25 em 时图像宽度为视窗宽度的 100%，或者在小于等于 25em 时为视图宽度的 60%。
picture 元素
picture 元素让你可以针对不同的屏幕尺寸声明图片。这个可以通过用 <picture> 元素封装 <img> ，并且描述多个 <source> 子元素来实现。
<picture> 标记单独使用并不会显示任何东西。你已经被假定会声明默认的图像来源作为 src 属性的取值，而可选的图像来源则会放在 scrset 属性之中，如下所示：
<picture>
<source media="(max-width: 25em)" srcset="
clicks/small/low-res.jpg 1x,
clicks/small/medium-res.jpg 2x,
clicks/small/high-res.jpg 3x
">
<source media="(max-width: 60em)" srcset="
clicks/large/low-res.jpg 1x,
clicks/large/medium-res.jpg 2x,
clicks/large/high-res.jpg 3x
">
<img src="clicks/default/medium-res.jpg"></picture>
貌似缺少的 include
HTML 5.1 — 14 项新增特性及使用案例 - 技术翻译 - 开源中国社区.html
作者:: 绰号:老哇的爪子claw of Eagle 偶像破坏者Iconoclast image-smasher
捕鸟王"Bird Catcher kok 虔诚者Pious 宗教信仰* Defender Of the Faith. 卡拉卡拉红斗篷 Caracalla red cloak 万兽之王
简称：： Emir Attilax Akbar 埃米尔 阿提拉克斯 阿克巴
全名：：Emir Attilax Akbar bin Mahmud bin attila bin Solomon bin adam Al Rapanui 埃米尔 阿提拉克斯 阿克巴 本 马哈茂德 本 阿提拉 本 所罗门 本亚当 阿尔 拉帕努伊
常用名：艾提拉（艾龙）， EMAIL:1466519819@qq.com
头衔：uke总部o2o负责人，全球网格化项目创始人，
uke交友协会会长 uke捕猎协会会长 Emir Uke部落首席大酋长，
uke宗教与文化融合事务部部长， uke宗教改革委员会副主席
uke制度与重大会议委员会委员长，uke保安部首席大队长,uke制度检查委员会副会长，
uke 首席cto 软件部门总监 技术部副总监 研发部门总监主管 产品部副经理 项目部副经理 uke科技研究院院长 uke软件培训大师
uke波利尼西亚区大区连锁负责人 汤加王国区域负责人 uke克尔格伦群岛区连锁负责人，莱恩群岛区连锁负责人，uke布维岛和南乔治亚和南桑威奇群岛大区连锁负责人
Uke软件标准化协会理事长理事长 Uke 数据库与存储标准化协会副会长
uke终身教育学校副校长 Uke医院 与医学院方面的创始人
uec学院校长， uecip图像处理机器视觉专业系主任 uke文档检索专业系主任
Uke图像处理与机器视觉学院首席院长
Uke 户外运动协会理事长 度假村首席大村长 uke出版社编辑总编
转载请注明来源：attilax的专栏 ?http://www.cnblogs.com/attilax/
--Atiend v8