几周前， W3C在2016年11月发布了新HTML 5.1建议 ，对HTML规范进行了重大修改 。在最近的博客文章中 ，W3C称新版本为黄金标准 ，因为HTML 5.1为我们提供了新的方式我们可以使用HTML创建更灵活的网络体验。
在本文中，我们将介绍不用触摸JavaScript就可以使用的新功能，但是JavaScript背景的改进也非常出色，正如您在官方变更日志中所看到的那样。
请注意，当前并非所有浏览器都支持所有这些功能，因此在生产中使用它们之前，请不要忘记检查浏览器的支持 。 如果您对HTML标准的进一步发展感兴趣，则可以查看HTML 5.2的工作草案。
1.定义多个图像资源以进行响应式设计
在HTML 5.1中，可以将 srcset属性一起使用，以使响应图像选择成为可能。 <picture>标记表示一个图像容器 ，允许开发人员声明不同的图像资源 ，以适应UA的视口大小，屏幕像素密度，屏幕类型以及用于响应式设计的其他参数。
<picture>标记本身不显示任何内容，它仅用作多个图像资源的上下文 。 您需要将默认图像资源声明为<img>标记的src属性的值，并且备用图像资源位于<img>和srcset属性内。
<picture>
<source srcset="mobile.jpg, mobile-hd.jpg 2x"
media="(max-width: 360px)">
<source srcset="large.jpg, large-hd.jpg 2x"
media="(min-width: 1920px)">
<img src="default.jpg" srcset="default-hd.jpg 2x"
alt="your image">
</picture>2.显示或隐藏其他信息
使用
标记，可以将扩展信息添加到内容片中。 默认情况下 ， 不会显示其他信息，但是如果用户感兴趣，他们可以选择查看 。 在代码中，应该将<summary>标记放在<details> 。 在<summary>标记之后，您可以添加要隐藏的其他信息。
<section>
<h2>Error Message</h2>
<details>
<summary>We couldn't finish downloading this video.</summary>
<dl>
<dt>File name:</dt><dd>yourfile.mp4</dd>
<dt>File size:</dt><dd>100 MB</dd>
<dt>Duration:</dt><dd>00:05:27</dd>
</dl>
</details>
</section>
这是此代码示例在Firefox 50.0.2中的样子：
3.向浏览器的上下文菜单添加功能
使用元素及其type="context"属性，可以将自定义功能添加到浏览器的上下文菜单 。 您需要将<menuitem>分配为<menu>标记的子元素。 <menu>元素的id必须带有与我们要向其添加上下文菜单的元素的contextmenu属性相同的值 （在下面的示例中为<button>元素）。
<button contextmenu="rightclickmenu">Right click me</button>
<menu type="context" id="rightclickmenu">
<menuitem type="checkbox" label="I ♥ HTML5.1.">
</menu>
<menuitem>标记可以具有三种不同的类型 ： "checkbox" ， "command" （您需要使用JavaScript向其中添加操作）和radio 。 可以在上下文菜单中添加多个菜单项，但是浏览器对此功能的支持 还不是很好 。 Chrome 54不支持它，而Firefox 50仅允许存在一个额外的上下文菜单。 您可以在下面看到该代码示例在Firefox 50中的工作方式。
4.嵌套页眉和页脚
如果每个级别都包含在节内容中，则HTML 5.1允许您嵌套页眉和页脚 。 下面的注释是W3C文档的屏幕截图，并向开发人员建议正确的页眉和页脚嵌套方式。
如果要将详细的标头添加到语义分段元素 （例如<article>和<section> ，则此功能很有用。 下面的代码示例在标题内创建侧边栏， <aside>标记也是sectioning元素，并在其中添加有关作者的其他信息 。 标头内的侧边栏也有其自己的标头 ，带有字幕和作者的联系信息。
<article>
<header>
<h1>Article Title</h1>
<aside>
<header>
<h2>About the author</h2>
<p><a href="#">Email</a><a href="#">Twitter</a></p>
</header>
<img src="photo.jpg" alt="Author photo">
<p>Author bio ... </p>
</aside>
</header>
<p>Article intro</p>
<p>Other paragraphs ...</p>
</article>
5.对样式和脚本使用加密随机数
使用HTML 5.1，您可以将密码随机数添加到样式和脚本中 。 您可以在
<section>
<h2>Error Message</h2>
<details>
<summary>We couldn't finish downloading this video.</summary>
<dl>
<dt>File name:</dt><dd>yourfile.mp4</dd>
<dt>File size:</dt><dd>100 MB</dd>
<dt>Duration:</dt><dd>00:05:27</dd>
</dl>
</details>
</section>
type="context"属性，可以将自定义功能添加到浏览器的上下文菜单 。 您需要将<menuitem>分配为<menu>标记的子元素。 <menu>元素的id必须带有与我们要向其添加上下文菜单的元素的contextmenu属性相同的值 （在下面的示例中为<button>元素）。 <button contextmenu="rightclickmenu">Right click me</button>
<menu type="context" id="rightclickmenu">
<menuitem type="checkbox" label="I ♥ HTML5.1.">
</menu><menuitem>标记可以具有三种不同的类型 ： "checkbox" ， "command" （您需要使用JavaScript向其中添加操作）和radio 。 可以在上下文菜单中添加多个菜单项，但是浏览器对此功能的支持 还不是很好 。 Chrome 54不支持它，而Firefox 50仅允许存在一个额外的上下文菜单。 您可以在下面看到该代码示例在Firefox 50中的工作方式。
<article>和<section> ，则此功能很有用。 下面的代码示例在标题内创建侧边栏， <aside>标记也是sectioning元素，并在其中添加有关作者的其他信息 。 标头内的侧边栏也有其自己的标头 ，带有字幕和作者的联系信息。 <article>
<header>
<h1>Article Title</h1>
<aside>
<header>
<h2>About the author</h2>
<p><a href="#">Email</a><a href="#">Twitter</a></p>
</header>
<img src="photo.jpg" alt="Author photo">
<p>Author bio ... </p>
</aside>
</header>
<p>Article intro</p>
<p>Other paragraphs ...</p>
</article>今天的文章irl算法_HTML 5.1的10个新功能以及如何使用它们IRL分享到此就结束了，感谢您的阅读。
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
如需转载请保留出处：https://bianchenghao.cn/67825.html
