HTML 5.1的10大新功能详解

在几个星期前,W3C 在 2016 年 11 月发布了新的  HTML 5.1 recommendation ,HTML 规范得到了重大改进，在最近的博客中 ,W3C 将新的主版本称为黄金标准 ，因为 HTML 5.1 为我们提供了新的方法，我们可以使用 HTML 来创建更灵活的网络体验。一起来看看吧，希望对大家学习html5  http://www.maiziedu.com/course/352/有所帮助。 注意：目前并非所有浏览器都支持所有这些功能，所以在使用它们之前, 请不要忘记检查浏览器是否支持。 1. 为响应设计定义多个图像资源 <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> 在HTML 5.1 中，你可以使用  <picture>  标签和  srcset  属性来使 响应式图像选择 成为可能。  <picture>  标签表示图像容器，其允许开发者声明不同的图像资源以便适应 UA 的视口大小，屏幕像素密度，屏幕类型和在响应设计中使用的其他参数。 2. 显示或隐藏额外信息 <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> 使用 <details>  和  <summary>  标签，可以向内容项添加 扩展信息 。 默认情况下不显示额外信息，但如果用户感兴趣，他们可以选择查看。 在你写代码的时候，应该将  <summary>  标签放在  <details>  中。 你可以在  <summary>  标签之后添加要隐藏的额外信息。 3. 将功能添加到浏览器的上下文菜单 <button contextmenu="rightclickmenu">Right click me</button>     <menu type="context" id="rightclickmenu">     <menuitem type="checkbox" label="I  HTML5.1."> </menu> 使用 <menuitem>  元素及其  type = “ context ” 属性，可以将自定义功能添加到浏览器的上下文菜单中。你需要将  <menuitem>  指定为  <menu>  标签的子元素。  <menu>  元素的  id  需要与我们要添加上下文菜单的元素（即上面示例中的  <button>  元素）的 contextmenu  属性的值相同。 注意：浏览器对这个功能的支持还不是很好。 Chrome 54 并不支持，而 Firefox 50 仅允许一个额外的上下文菜单。 4. 嵌入页眉和页脚 <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> 在HTML 5.1 中，如果每个级别都包含在分段内容里，则允许嵌套页眉和页脚。 如果要向语义分段元素（例如 <article>  和  <section>  ）添加精细的标题话，这个功能会非常有用。 下面的代码示例在标题中创建一个侧边栏，  <aside>  标签也是一个分段元素，并在其中添加了关于作者的额外信息。 标题中的侧边栏也有自己的标题，以及一个副标题和作者的联系方式。 5. 对样式和脚本使用加密随机数 <script nonce='adfjaf8eda64U7'>     // some JavaScript </script> 使用HTML 5.1 ，通过在  <script>  和  <style>  元素中使用  nonce  属性 。你可以将 加密随机数添加到样式和脚本中 。加密随机数是随机生成的数字并且一个只能使用一次，而且是在每次页面请求的时候重新生成。网站的 内容安全策略 可以使用随机数来决定是否应在网页上应用特定的脚本或样式。在  Google  开发者的网页基础 中，你可以进一步了解如何正确使用随机数和 CSP 。 6. 创建反向链路关系 <!-- Current document is the parent of the linked category.html document --> <link rev="parent" href="category.html"> 你可以再次将 rev  属性添加到你的链接。它之前在 HTML 4 中被定义，但 HTML5 不支持。  HTML 5.1 允许开发人员再次为  <link>  和  <a> 元素使用此属性。  rev  属性与  rel  相反，它指定当前文档和链接文档在相反方向上的关系（当前文档与链接文档的关系）。 rev  属性已包含在 HTML 5.1 规范中，主要用于 支持 RDFa  ，后者是一种广泛使用的结构化数据标记格式，并扩展了 HTML 语言。 7. 使用零宽度图像 <img src="yourimage.jpg" width="0" height="0" alt=""> HTML 5.1 允许开发人员创建  width  属性值为  0  的 零宽度图像 。 如果你想要包含不想向用户显示的图像（例如跟踪图像文件）则此功能很有用。建议将零宽度图像与空  alt  属性一起使用。 8. 分离浏览器上下文以防止网络钓鱼攻击 <a href="#" target="_blank" rel="noopener">   Your link that won't make troubles </a> 在你的网站上使用相同的源链接最终可能会让你陷入麻烦。  该漏洞被称为 target = “ _ blank ” 漏洞 ，这是一个让讨厌的网络钓鱼攻击。你可以（安全地）测试下这个漏洞是如何在这个 机智的 Github 演示页 上进行攻击的，你可以在  Github  上查看该代码。 HTML 5.1 已经标准化了  rel = “ noopener ” 属性的用法，它消除了分隔浏览器上下文的问题，你可以在  <a>  和  <area>  元素中使用  rel = “ noopener ” 。 9. 创建一个空选项 HTML 5.1 允许开发人员创建一个空的  <option>  元素。  <option>  标签可以是  <select>  ，  <optgroup>  或  <datalist>  元素的子元素。 如果你不想建议用户应该选择哪个选项，以及在想要设计用户友好的表单时，使用空的  <option>  可能很有用。 10. 更灵活地处理图形标题 <figcaption>  标签表示  <figure>  元素的题注或说明，其是用于视觉（例如插图，照片和图表）的容器。以前，  <figcaption>  标记只能用作  <figure>  元素的第一个或最后一个子元素。 HTML 5.1 已放松此规则，现在  <figcaption>  可以出现在其  <figure>  容器中的任何位置。