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 屬性，而是使用 apple-touch-icon 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> 段落的內容。
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版本內容請搜索武林網以前的文章或繼續瀏覽下面的相關文章，希望大家以后多多支持武林網！
新聞熱點
疑難解答
