Atitit html5.1 新特性attilax总结

Atitit html5.1 新特性attilax总结

9. 嵌入 header 和 footer1

7. 校验表单1

6. 浏览器的上下文菜单2

1. 响应式图像2

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人顶

顶 翻译得不错哦！

其它翻译版本(1)

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