详解HTML5.2版本带来的修改
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 属性即可显示。
<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 。
<iframe allowpaymentrequest>
rel="apple-touch-icon"
我们使用 <link rel="icon"> 指定网页 icon，除此之外它还支持使用 sizes 属性，定义不同的尺寸的 icon，供浏览器在显示是择优显示。
<link rel="icon" sizes="16x16" href="path/to/icon16.png"> <link rel="icon" sizes="32x32" href="path/to/icon32.png">
html 5.2 之前，苹果 ios 设备并不支持 <link rel="icon"> 的 sizes 属性，而是使用 rel 来支持在自家设备上显示网页或安装网页应用（比如 pwa）时使用的 icon。
<link rel="apple-touch-icon" href="/example.png">
现在规范承认了 apple-touch-icon 这个 rel 值，并且支持在这个 <link rel="apple-touch-icon"> 上设置 sizes 属性。
<link rel="apple-touch-icon" sizes="16x16" href="path/to/icon16.png"> <link rel="apple-touch-icon" sizes="32x32" href="path/to/icon32.png">
新的有效实践
多个 <main> 标签
html 5.2 之前，一个页面只能存在一个 <main> 标签，用来表示某个页面独一无二的主题内容。不过，从 html 5.2 版本开始，允许一个页面中同时存在多个 <main> 标签，不过只能有一个显示的，其他都要用 hidden 属性隐藏。
<main>...</main> <main hidden>...</main> <main hidden>...</main>
注意，其他不显示的 <main> 都要使用 hidden 属性隐藏，使用 display: none; 或 visibility: hidden; 的方式的隐藏都是无效的。
<body> 内 <style>
<style> 之前都是只能在 <head> 内定义的，不过随着 component-ized 开发模式的增长，将组件样式就近写在组件结构旁边的模式开始流行起来。
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> 中，为表单域编组。
下面是一个例子：
<!-- see: https://www.w3schools.com/tags/tag_fieldset.asp --> <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 开始，可以使用标题元素了。
<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>
移除特性
-
<keygen>、<menu>和<menuitem>元素 - 文本
<input>的inputmode和dropzone属性 -
widow.showmodaldialog()方法
新的无效实践
<p> 中的无效内容
以下三类元素不能作为 <p> 段落的内容。
- 行内块、表格元素（inline blocks、inline tables）
- 浮动元素（floated）
- 定位元素（positioned block-level elements）
strict doctype
html4 和 xhtml1 的严格文档类型声明（strict doctype）不再是有效 html。
<!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">
到此这篇关于详解html5.2版本带来的修改的文章就介绍到这了,更多相关html5.2版本内容请搜索以前的文章或继续浏览下面的相关文章，希望大家以后多多支持！
上一篇： Python+Scrapy爬取腾讯新闻首页所有新闻及评论
下一篇： html5简介及新增功能介绍