HTML5.2新特性解读

不到一个月之前，W3C官方发布 HTML5.2，并成为官方推荐使用标准。这意味着作为web开发者，我们可以愉快地使用5.2中的新特性了。

W3C在HTML5.2中添加了一些新特性，也有一些曾经的特性被移出了。这篇文章里笔者会为大家介绍一下对开发者影响较大的一些更新。

新特性

原生提供`<dialog>`元素

众所周知，dialog是web开发中非常常用的一个组件，很多人的前端组件开发之路都是从开发一个dialog开始的。市面上各种框架对dialog的实现各种各样，用法也有难有易。这次官方对dialog的实现改变了这样的现状，使用官方dialog，不必再担心各种框架实现的陷阱了。

下面演示一下dialog的用法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <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>
</body>
</html>

注意：dialog默认是隐藏的，必须要显示声明为open才能在页面显示。也可以像上述代码所示，手动触发dialog的open和close事件。

iFrame可以使用支付请求接口

新版本的规范在 iframe 标签上新增了一些重要属性用于支持新的 JavaScript API。其添加了 allowpaymentrequest 属性以允许 iframe 控制支付请求 API 的访问。这也意味着嵌入了第三方内容的页面能够控制该第三方内容是否可向用户请求获取支付凭证，进而让可嵌入的购物车工具可以利用新的 API。来自 Forrester 的 Brendan Miller 阐述了支付请求 API 所带来的好处，他说：

该新标准让开发者可以创建一个简化的结帐页面，用户可以重复使用保存的付款和地址信息来加快结账速度，并减少错误输入。

支付请求 API 已经可在 Chrome、Edge 和技术预览版的 Safari 中使用。

对main标签多个使用的支持

在HTML5.2之前，页面中只能存在一个main标签，多余的main标签将被隐藏。此次5.2的发布，对多个main提供了支持，开发者需要在页面中对不需要显示的main标签设置hidden属性，或者使用其他隐藏标签的方法。

<main>...</main>  
<main hidden>...</main>  
<main hidden>...</main>

允许在body中写style

HTML5.2 允许将style标签写在body标签中，可以让样式与其影响的标签更贴近，但注意，官方并不推荐这么做，还是希望开发者将style写在head里。

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

移除的特性

在HTML5.2中一些元素被移除了，比如：

keygen：帮助forms生成公钥
menu和menuitem：用来生成导航或者菜单

在p标签中，不再有inline、floated或者blocked

在HTML5.2中，唯一允许作为p标签子元素的是段落内容。这意味着在p标签中不再允许出现下面的几种元素样式：

Inline blocks
Inline tables
Floated and positioned blocks

不再有严格模式的的Doctypes

最后，我们终于可以和下面的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">

新特性

原生提供<dialog>元素