html5 不允许修改,详解HTML5.2版本带来的修改

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

新特性

原生 元素

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

元素默认是隐藏的。

Dialog Title

Dialog content and other stuff will go here

添加 open 属性即可显示。

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

Open Dialog

Close Dialog

Dialog Title

Dialog content and other stuff will go here

const dialog = document.getElementById("dialog");

document.getElementById("open").addEventListener("click", () => {

dialog.show();

});

document.getElementById("close").addEventListener("click", () => {

dialog.close();

});

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

allowpaymentrequest 属性

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

rel="apple-touch-icon"

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

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

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

新的有效实践

多个 标签

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

...

...

...

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

I’m cornflowerblue!

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

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.

即

内的