W3C HTML 5.2 規(guī)范中， 有一節(jié) 介紹該版本引入的修改，我綜合來(lái)自 《What’s New in HTML 5.2?》 這篇文章的描述，在此列舉對(duì)我來(lái)說(shuō)比較重要的部分。
新特性
原生 <dialog> 元素
對(duì)話(huà)框在平時(shí)開(kāi)發(fā)中，使用較為頻繁，HTML 5.2 規(guī)范提供了 <dialog> 元素來(lái)創(chuàng)建對(duì)話(huà)框。
<dialog> 元素默認(rèn)是隱藏的。
<!-- 默認(rèn)是隱藏的 --><dialog> <h2>Dialog Title</h2> <p>Dialog content and other stuff will go here</p></dialog>
添加 open 屬性即可顯示。
<dialog open>
HTMLDialogElement 是 <dialog> 的底層元素表示，提供了 show() 、 close() 、 showModal() 方法，控制對(duì)話(huà)框的顯隱。
<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() 創(chuàng)建是一個(gè)模態(tài)框，打開(kāi)時(shí)默認(rèn)不能操作背后頁(yè)面里的內(nèi)容；而 show() 是以彈框形式顯示的。
allowpaymentrequest 屬性
現(xiàn)在可以為 <iframe> 添加 allowpaymentrequest 屬性的方式，允許 <iframe> 內(nèi)部網(wǎng)頁(yè)使用 Payment Request API 。
<iframe allowpaymentrequest>
rel="apple-touch-icon"
我們使用 <link rel="icon"> 指定網(wǎng)頁(yè) icon，除此之外它還支持使用 sizes 屬性，定義不同的尺寸的 icon，供瀏覽器在顯示是擇優(yōu)顯示。
<link rel="icon" sizes="16x16" href="path/to/icon16.png"> <link rel="icon" sizes="32x32" href="path/to/icon32.png">
HTML 5.2 之前，蘋(píng)果 iOS 設(shè)備并不支持 <link rel="icon"> 的 sizes 屬性，而是使用 apple-touch-icon rel 來(lái)支持在自家設(shè)備上顯示網(wǎng)頁(yè)或安裝網(wǎng)頁(yè)應(yīng)用（比如 PWA）時(shí)使用的 icon。
<link rel="apple-touch-icon" href="/example.png">
現(xiàn)在規(guī)范承認(rèn)了 apple-touch-icon 這個(gè) rel 值，并且支持在這個(gè) <link rel="apple-touch-icon"> 上設(shè)置 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">
新的有效實(shí)踐
多個(gè) <main> 標(biāo)簽
HTML 5.2 之前，一個(gè)頁(yè)面只能存在一個(gè) <main> 標(biāo)簽，用來(lái)表示某個(gè)頁(yè)面獨(dú)一無(wú)二的主題內(nèi)容。不過(guò)，從 HTML 5.2 版本開(kāi)始，允許一個(gè)頁(yè)面中同時(shí)存在多個(gè) <main> 標(biāo)簽，不過(guò)只能有一個(gè)顯示的，其他都要用 hidden 屬性隱藏。
<main>...</main><main hidden>...</main><main hidden>...</main>
注意，其他不顯示的 <main> 都要使用 hidden 屬性隱藏，使用 display: none; 或 visibility: hidden; 的方式的隱藏都是無(wú)效的。
<body> 內(nèi) <style>
<style> 之前都是只能在 <head> 內(nèi)定義的，不過(guò)隨著 component-ized 開(kāi)發(fā)模式的增長(zhǎng)，將組件樣式就近寫(xiě)在組件結(jié)構(gòu)旁邊的模式開(kāi)始流行起來(lái)。
HTML 5.2 允許在 <body> 內(nèi)使用 <style> 標(biāo)簽，就近定義結(jié)構(gòu)樣式。
<body> <p>I’m cornflowerblue!</p> <style> p { color: cornflowerblue; } </style> <p>I’m cornflowerblue!</p></body>但最好還是不要這樣做，把樣式寫(xiě)在 中是更推薦的做法。規(guī)范中提到：
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> 內(nèi)的 <style> 可能會(huì)導(dǎo)致之前元素的布局改變，令頁(yè)面發(fā)生重繪。所以盡量避免使用。
<legend> 中可使用標(biāo)題元素
<legend> 用在 <fieldset> 標(biāo)簽中作標(biāo)題使用， <fieldset> 則用在 <form> 中，為表單域編組。
下面是一個(gè)例子：
<!-- 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 開(kāi)始，可以使用標(biāo)題元素了。
<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() 方法新的無(wú)效實(shí)踐
<p> 中的無(wú)效內(nèi)容
以下三類(lèi)元素不能作為 <p> 段落的內(nèi)容。
strict doctype
HTML4 和 XHTML1 的嚴(yán)格文檔類(lèi)型聲明（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">
到此這篇關(guān)于詳解HTML5.2版本帶來(lái)的修改的文章就介紹到這了,更多相關(guān)HTML5.2版本內(nèi)容請(qǐng)搜索武林網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持武林網(wǎng)！
新聞熱點(diǎn)
疑難解答
圖片精選
