转载

HTML 5.1 — 14 项新增特性及使用案例

HTML5 属于万维网联盟 (W3C), 这个组织为整个网络界提供了标准，如此形成的协议可在全世界通行。在 2016 年 11 月， W3C 对长期行使的 HTML 5 标准进行了更新，它是2年内的第一次小更新。许多最开始提出的 HTML 5.1 功能特性都因为设计上的缺陷和缺乏浏览器厂商的支持而去掉了。

尽管有一些元素和功能提升被带进了 HTML 5.1 里面, 但它仍然是一个小的更新。其中的一些新的元素包含了组合标签, 现在这样的元素包括有 <dialog>, <details>, <summary> 以及<picture>, 这样就为开发者提供了更多表达创意和内容的空间。

W3C 以及开始着手发展 HTML 5.2 草案，有望于在近2017 年底发布。而我们在这里所要呈现的是在版本 5.1 中被引入的新的功能特性和功能提升。你不需要动 JavaScript 就可以利用上这些功能特性。并非所有的浏览器都支持这些功能特性，因此你最好是在将它们应用于生产环境之前先检查一下浏览器的支持情况。

14. 防止网络钓鱼攻击

大多数使用 target ='_ blank' 的人都不知道一个有趣的事实——新打开的标签可以更改 window.opener.location 到一些网络钓鱼页面。它会在开放页面上代表你执行一些恶意 JavaScript 代码。因为用户相信打开的页面已安全，所以他们不会有所怀疑。

为了完全消除这个问题，HTML 5.1 已经通过隔离浏览器上下文的方式标准化了的 rel=”noopener” 属性的用法。 rel =“noopener”可以在 <a> 和 <area> 标签中使用。

<a href="#" target="_blank" rel="noopener">
  The link won't make trouble anymore
</a>

13. 灵活处理图片标题

<figcaption> 标签表示与 <figure> 元素关联的标题或图例，通常作为例如图片、图表、插图等视觉元素的容器。在早期的 HTML 版本中，<figcaption> 只能用作第一个或最后一个 <figure> 的子标签。HTML5.1 已放宽此限制，现在您可以在 <figure> 容器中的任何位置使用 <figcaption>。

<article>
  <h1>The Headline of todays news </h1>
  <figure>
    <img src="petrolimage.jpeg" alt="Petrol price drops">
    <figcaption>A man fueling up his car at petrol station</figcaption>
  </figure>
  <p>This is the forth hike in petrol prices in two month and the third in case of diesel in one fortnight.</p>
</article>

12. 拼写检查

spellcheck 是一个取值可以为空字符串、true 和 false 的枚举属性。如果指定其状态为 true，就表示元素将会接受对其的拼写和语法检查。

element.forceSpellCheck() 将强制用户代理在文本元素上报告检查出来的拼写和语法错误，即使用户从来没将输入聚焦在该元素上。

<p spellcheck="true">
 <label>Name: <input spellcheck=" false" id="textbox"></label>
</p>

11. 空选项

新版的 HTML 允许你创建一个空的 <option> 元素。它可以是 <optgroup>, <datalist> 或者 <select> 元素的子元素。你将会发现这项功能在设计对用户友好的表单方面时能有所帮助。

10. 支持 Frame 的全屏

为 Frame 开发的布尔变量 allowfullscreen 属性允许您通过使用 requestFullscreen() 方法控制内容是否可以全屏显示。例如，我们使用嵌入 YouTube 的播放器的 iframe 做示例。需要设置 allowfullscreen 属性才能让播放器全屏显示视频。

<article>
  <header>
  <p><img src="/usericons/16235"> <b>Fred Flintstone</b></p>
  <p><a href="/posts/30934" rel=bookmark>12:44</a> — <a href="#acl-503439551">Private Post</a></p>
  </header>
  <main>
  <p>Check out my new video!</p>
  <iframe title="Video" src="https://youtube.com/?id=92469812" allowfullscreen></iframe>
  </main>
</article>

9. 嵌入页眉和页脚

HTML 5.1 允许您在其他 header 中嵌套页眉（header）和页脚（footer）。如果页眉或页脚本身包含在 section 内容中，则可以向 header 元素添加页眉或页脚。

如果你想在诸如 <section> 和 <article> 等语义分段元素中添加精心设计的 header，这个特性是非常有用的。

在下面给出的代码中，<article> 包含 <header>，其具有本身包含 <header> 标签的 <aside> 标签。

<article>
  <header>
    <h2>Lesson: How to cook chicken</h2>
    <aside>
      <header>
        <h2>About the author: Tom Hank</h2>
        <p><a href="./tomhank/">Contact him!</a></p>
      </header>
      <p>Expert in nothing but Cooking. The cookbook sideshow.</p>
    </aside>
  </header>
  <p><ins>Pour the marinade into the zip-top bag with the chicken and seal it.
          Remove as much air as possible from the bag and seal it. </ins></p>
</article>

8. 零宽度的图片

新版的 HTML 让你能加入零尺寸的图片。这项功能可以被用在所提供的图片并不是展示给用户看的时候。如果一个 img 元素是使用于展示一张图片之外的目的，例如，作为计算页面视图数量的一部分，就可以将 0 值应用到 width 和 height 属性。对于零宽度的图片，建宇使用空属性。

<img src="theimagefile.jpg" width="0" height="0" alt="">

7. 验证表单

HTML 5.1 — 14 项新增特性及使用案例

新的 reportValidity() 方法让你可以对一个表单进行校验，然后获取到校验结果，再然后将错误信息就在浏览器中显示给用户看。如果一个元素同一时刻被校验出多个问题，那么用户代理也许会报告超过一个的约束违规情况,。在这里的示例中，“password”输入框因为其必填但还是空的而被标上错误提示信息。

<h2>Form validation</h2>
<p>Enter details</p>
<form>
  <label>
    Mandatory input <input type="password" name="password" required />
  </label>
  <button type="submit">Submit</button>
</form>
<script>
  document.querySelector('form').reportValidity()
</script>

6. 浏览器的上下文菜单

HTML 5.1 — 14 项新增特性及使用案例

在 HTML 5.1 中, 你可以使用 <menu> 标记来定义菜单，里面包含了一个或者多个 <menuitem> 元素, 然后利用 contextmenu 属性将其绑定到任何元素上。 <menu> 元素的 id 取值应该与我们想要为其添加上下文菜单的元素的 contextmenu 属性取值保持一致。

每一个 <menuitem> 都可以有如下三个表单项中的一个:

radio – 从一个分组中获取选项；
checkbox – 选择或者取消选择一个选项；
command – 在点击时执行一个动作。

<h2 contextmenu="popup-menu">
  Right click to get the context menu demo.
</h2>
 
<menu type="context" id="popup-menu">
  <menuitem type="checkbox" checked="true">Checkbox 1 </menuitem>
  <menuitem type="command" label="Command" onclick="alert('WARNING')">Checkbox 2</menuitem> 
  <menuitem type="radio" name="group1">Radio button a</menuitem>
  <menuitem type="radio" name="group1" checked="true">Radio button b</menuitem>
  <menuitem type="checkbox" disabled>Disabled menu item</menuitem>
</menu>

5. 在脚本和样式上使用加密随机数

加密随机数（cryptographic nonce ）是一个随机生成的数字，只能被使用一次, 而且针对每一次页面请求，它都得被生成出来。这个 nonce 属性可以被使用在 <script> 和 <style> 元素中。

它一般被用在一个网站的内容安全策略之中，以决定一个特定的样式和脚本是否应该在页面上被实现。在下面所提供的代码中，这个 value 是硬编码的，不过在实际的使用场景中，这个值是随机生成的。

<script nonce='d3ne7uWP43Bhr0e'>
  The JavaScript Code 
</script>

4. 反向链路关系

rev 属性是在 HTML 4 中定义的，但它并不包含在 HTML5 中。W3C 决定再次在 <a> 和 <link> 元素中添加 rev 属性。 rev 属性描述了当前和所链接的文档之间的逆向关系。它已被包含到标准中，以支持广泛使用的结构化数据标记格式 RDFa。

让我们以两个文档的例子来说明，每个文档包含一个lesson，它们之间的链接可以使用 rel 和 rev 属性定义，如下所示：

//Document with URL "chapter1.html"
 
<link href="Lesson2.html" rel="next" rev="prev">
 
 
//Document with URL "chapter2.html"
 
<link href="Lesson1.html" rel="prev" rev="next">
<link href="Lesson3.html" rel="next" rev="prev">

原文 https://www.oschina.net/translate/whats-new-in-html-5-1-added-features

正文到此结束