详解HTML5.2版本带来的修改

发布时间：2020-05-10 12:16 所属栏目：115 来源：站长网

导读：副标题#e# W3C HTML 5.2 规范中，介绍该版本引入的修改，我综合来自《Whats New in HTML 5.2?》这篇文章的描述，在此列举对我来说比较重要的部分。新特性原生 dialog 元素对话框在平时开发中，使用较为频繁，HTML 5.2 规范提供了 dialog 元素来创建对

W3C HTML 5.2 规范中，介绍该版本引入的修改，我综合来自《What’s New in HTML 5.2?》这篇文章的描述，在此列举对我来说比较重要的部分。

新特性

原生 <dialog> 元素

对话框在平时开发中，使用较为频繁，HTML 5.2 规范提供了 <dialog> 元素来创建对话框。

<dialog> 元素默认是隐藏的。

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

添加 open 属性即可显示。

HTMLDialogElement 是 <dialog> 的底层元素表示，提供了 show() 、 close() 、 showModal() 方法，控制对话框的显隐。

<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>

show() 与 showModal() 不同之处在于， showModal() 创建是一个模态框，打开时默认不能操作背后页面里的内容；而 show() 是以弹框形式显示的。

allowpaymentrequest 属性

现在可以为 <iframe> 添加 allowpaymentrequest 属性的方式，允许 <iframe> 内部网页使用 Payment Request API 。

rel="apple-touch-icon"

我们使用 <link rel="icon"> 指定网页 icon，除此之外它还支持使用 sizes 属性，定义不同的尺寸的 icon，供浏览器在显示是择优显示。

HTML 5.2 之前，苹果 iOS 设备并不支持 <link rel="icon"> 的 sizes 属性，而是使用 apple-touch-icon rel 来支持在自家设备上显示网页或安装网页应用（比如 PWA）时使用的 icon。

现在规范承认了 apple-touch-icon 这个 rel 值，并且支持在这个 <link rel="apple-touch-icon"> 上设置 sizes 属性。

新的有效实践

多个 <main> 标签

HTML 5.2 之前，一个页面只能存在一个 <main> 标签，用来表示某个页面独一无二的主题内容。不过，从 HTML 5.2 版本开始，允许一个页面中同时存在多个 <main> 标签，不过只能有一个显示的，其他都要用 hidden 属性隐藏。

注意，其他不显示的 <main> 都要使用 hidden 属性隐藏，使用 display: none; 或 visibility: hidden; 的方式的隐藏都是无效的。

HTML 5.2 允许在 <body> 内使用 <style> 标签，就近定义结构样式。

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

但最好还是不要这样做，把样式写在中是更推荐的做法。规范中提到：

A style element should preferably be used in the head of the document. The use of style in the body of the document may cause restyling, trigger layout and/or cause repainting, and hence, should be used with care.

即 <body> 内的 <style> 可能会导致之前元素的布局改变，令页面发生重绘。所以尽量避免使用。

<legend> 中可使用标题元素

<legend> 用在 <fieldset> 标签中作标题使用， <fieldset> 则用在 <form> 中，为表单域编组。

下面是一个例子：

<form action="/action_page.php"> <fieldset> <legend>Personalia:</legend> <label for="fname">First name:</label> <input type="text" id="fname" name="fname"><br><br> <label for="lname">Last name:</label> <input type="text" id="lname" name="lname"><br><br> <label for="email">Email:</label> <input type="email" id="email" name="email"><br><br> <label for="birthday">Birthday:</label> <input type="date" id="birthday" name="birthday"><br><br> <input type="submit" value="Submit"> </fieldset> </form>

HTML 5.2 之前， <legend> 中只能使用纯文本，HTML 5.2 开始，可以使用标题元素了。

（编辑：ASP站长网）