HTML 5.2 有哪些新内容？

时间 2019-11-17

标签 html 5.2 哪些内容栏目 HTML 繁體版

原文原文链接

原文地址：What’s New in HTML 5.2?

原文做者：bitsofco

译文出自：掘金翻译计划

本文永久连接：github.com/xitu/gold-m…

译者：lsvih

校对者：Raoul1996, 吃土小2叉

HTML 5.2 有哪些新内容？

就在不到一个月前，HTML 5.2 正式成为了 W3C 的推荐标准（REC）。当一个规范到达 REC 阶段，就意味着它已经正式获得了 W3C 成员和理事长的承认。而且 W3C 将正式推荐浏览器厂商部署、web 开发者实现此规范。css

在 REC 阶段有个原则叫作“任何新事物都至少要有两种独立的实现”，这对于咱们 web 开发者来讲是一个实践新特性的绝佳机会。html

在 HTML 5.2 中有一些添加和删除，具体改变能够参考官方的 HTML 5.2 变更内容网页。本文将介绍一些我认为与个人开发有关的改动。前端

新特性

原生的 `<dialog>` 元素

在 HTML 5.2 的全部改动中，最让我激动的就是关于 <dialog> 元素这个原生对话框的介绍。在 web 中，对话框比比皆是，可是它们的实现方式都各有不一样。对话框很难实现可访问性，这致使大多数的对话框对那些不方便以视觉方式访问网页的用户来讲都是不可用的。html5

新的 <dialog> 元素旨在改变这种情况，它提供了一种简单的方式来实现模态对话框。以后我会单独写一篇文章专门介绍这个元素的工做方式，在此先简单介绍一下。android

由一个 <dialog> 元素建立对话框：ios

<dialog>  
  <h2>Dialog Title</h2>
  <p>Dialog content and other stuff will go here</p>
</dialog>  
复制代码

默认状况下，对话框会在视图中（以及 DOM 访问中）隐藏，只有设置 open 属性后，对话框才会显示。git

<dialog open>  
复制代码

open 属性能够经过调用 show() 与 close() 方法开启或关闭，任何 HTMLDialogElement 均可以调用这两个方法。github

<button id="open">Open Dialog</button>  
<button id="close">Close Dialog</button>

<dialog id="dialog">  
  <h2>Dialog Title</h2>
  <p>Dialog content and other stuff will go here</p>
</dialog>

<script>  
const dialog = document.getElementById("dialog");

document.getElementById("open").addEventListener("click", () => {  
  dialog.show();
});

document.getElementById("close").addEventListener("click", () => {  
  dialog.close();
});
</script>  
复制代码

目前，Chrome 浏览器已经支持 <dialog> 元素，Firefox 也即将支持（behind a flag）。web

上图为 caniuse.com 关于 dialog 特性主流浏览器兼容状况的数据后端

在 iFrame 中使用 Payment Request API（支付请求 API）

Payment Request API 是支付结算表单的原生替代方案。它将支付信息置于浏览器处理，用来代替以前各个网站各不相同的结算表单，旨在为用户提供一种标准、一致的支付方式。

在 HTML 5.2 以前，这种支付请求没法在文档嵌入的 iframe 中使用，致使第三方嵌入式支付解决方案（如 Stripe, Paystack）基本不可能使用这个 API，由于它们一般是在 iframe 中处理支付接口。

为此，HTML 5.2 引入了用于 iframe 的 allowpaymentrequest 属性，容许用户在宿主网页中访问 iframe 的 Payment Request API。

<iframe allowpaymentrequest>  
复制代码

苹果的图标尺寸

如要定义网页图标，咱们能够在文档的 head 中使用 <link rel="icon"> 元素。若是要定义不一样尺寸的图标，咱们可使用 sizes 属性。

<link rel="icon" sizes="16x16" href="path/to/icon16.png">  
<link rel="icon" sizes="32x32" href="path/to/icon32.png">  
复制代码

这个属性虽然纯粹是个建议，但若是提供了多种尺寸的图标，可让用户代理（UA）决定使用哪一种尺寸的图标。在大多数设备有着不一样的“最佳”图标尺寸时尤其重要。

在 HTML 5.2 以前，sizes 属性仅能用于 rel 为 icon 的 link 元素中。然而，苹果的 iOS 设备不支持 sizes 属性。为了解决这个问题，苹果本身引入了一个他们设备专用的 rel appple-touch-icon 用于定义他们设备上使用的图标。

在 HTML 5.2 中，规范定义了 sizes 属性再也不仅仅可用于 rel 为 icon 的元素，也能用于 rel 为 apple-touch-icon 的元素。这样可让咱们为不一样的苹果设备提供不一样尺寸的图标。不过直到如今为止，据我所知苹果的设备仍是不支持 sizes 属性。在未来苹果最终支持此规范时，它将派上用场。

新的有效实践

除了新特性以外，HTML 5.2 还将一些以前无效的 HTML 写法认定为有效。

多个 `<main>` 元素

<main> 元素表明网页的主要内容。虽然不一样网页的重复内容能够放在 header、section 或者其它元素中，但 <main> 元素是为页面上的特定内容保留的。所以在 HTML 5.2 以前，<main> 元素在 DOM 中必须惟一才能令页面有效。

随着单页面应用（SPA）的普及，要坚持这个原则变得困难起来。在同一个网页的 DOM 中可能会有多个 <main> 元素，但在任意时刻只能给用户展现其中的一个。

使用 HTML 5.2，咱们只要保证同一时刻只有一个 <main> 元素可见，就能在咱们的标签中使用多个 <main> 元素。与此同时其它的 <main> 元素必须使用 hidden 属性进行隐藏。

<main>...</main>  
<main hidden>...</main>  
<main hidden>...</main>  
复制代码

咱们都知道，经过 CSS 来隐藏元素的方法有不少，但多余的 <main> 元素必须使用 hidden 属性进行隐藏。任何其它隐藏此元素的方法（如 display: none; 和 visibility: hidden;）都将无效。

在 `<body>` 中写样式

通常来讲，使用<style>元素定义的内联 CSS 样式会放置在 HTML 文档的 <head> 中。随着组件化开发的流行，开发者已经发现编写 style 并放置在与其相关的 html 中更加有益。

在 HTML 5.2 中，能够在 HTML 文档 <body> 内的任何地方定义内联 <style> 样式块。这意味着样式定义能够离它们被使用的地方更近。

<body>  
    <p>I’m cornflowerblue!</p>
    <style>
        p { color: cornflowerblue; }
    </style>
    <p>I’m cornflowerblue!</p>
</body>  
复制代码

然而仍需注意的是，因为性能问题，样式仍是应当优先考虑放在 <head> 中。参见规范，

样式元素最好用于文档的 head 中。在文档的 body 中使用样式可能致使重复定义样式，触发重布局、致使重绘，所以须要当心使用。

此外还应该注意的是如示例所示，样式不存在做用域。后来在 HTML 文档中定义的内联样式仍然会应用于以前定义的元素，因此它可能会触发重绘。

`<legend>` 中的标题元素

在表单中，<legend> 元素表示 <fieldset> 表单域中的标题。在 HTML 5.2 前，legend 元素的内容必须为纯文本。而如今，它能够包含标题元素（<h1>等）了。

<fieldset>  
    <legend><h2>Basic Information</h2></legend>
    <!-- Form fields for basic information -->
</fieldset>  
<fieldset>  
    <legend><h2>Contact Information</h2></legend>
    <!-- Form fields for contact information -->
</fieldset>  
复制代码

当咱们想用 fieldset 对表单中不一样部分进行分组时，这个特性很是有用。在这种状况下使用标题元素是有意义的，由于这能让那些依赖于文档大纲的用户能够轻松导航至表单的对应部分。

移除的特性

在 HTML 5.2 中移除了一些元素，具体为：

keygen：曾经用于帮助表单生成公钥
menu 与 menuitem：曾经用于建立导航与内容菜单

新的无效实践

最后，一些开发实践方式被规定再也不有效。

在 `<p>` 中再也不能包含行内、浮动、块类型的子元素

在 HTML 5.2 中，<p> 元素中惟一合法的子元素只能是文字内容。这也意味着如下类型的元素再也不能嵌套于段落标签 <p> 内：

行内块（Inline blocks）
行内表格（Inline tables）
浮动块与固定位置块

再也不支持严格文档类型（Strict Doctypes）

最后，咱们终于能够和这些文档类型说再见了！

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">  
复制代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
复制代码

掘金翻译计划是一个翻译优质互联网技术文章的社区，文章来源为掘金上的英文分享文章。内容覆盖 Android、iOS、前端、后端、区块链、产品、设计、人工智能等领域，想要查看更多优质译文请持续关注掘金翻译计划、官方微博、知乎专栏。

HTML 5.2 有哪些新内容？

HTML 5.2 有哪些新内容？

新特性

原生的 <dialog> 元素

在 iFrame 中使用 Payment Request API（支付请求 API）

苹果的图标尺寸

新的有效实践

多个 <main> 元素

在 <body> 中写样式

<legend> 中的标题元素

移除的特性

新的无效实践

在 <p> 中再也不能包含行内、浮动、块类型的子元素

再也不支持严格文档类型（Strict Doctypes）

原生的 `<dialog>` 元素

多个 `<main>` 元素

在 `<body>` 中写样式

`<legend>` 中的标题元素

在 `<p>` 中再也不能包含行内、浮动、块类型的子元素