溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹了HTML5.2版本有什么變化，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。
W3C HTML 5.2 規范中， 有一節 介紹該版本引入的修改，我綜合來自 《What’s New in HTML 5.2?》 這篇文章的描述，在此列舉對我來說比較重要的部分。
新特性
原生 <dialog> 元素
對話框在平時開發中，使用較為頻繁，HTML 5.2 規范提供了 <dialog> 元素來創建對話框。
<dialog> 元素默認是隱藏的。
<!-- 默認是隱藏的 --> <dialog> <h3>Dialog Title</h3> <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">
<h3>Dialog Title</h3>
<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><h3>Basic Information</h3></legend> <!-- Form fields for basic information --> </fieldset> <fieldset> <legend><h3>Contact Information</h3></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">
html的全稱為超文本標記語言，它是一種標記語言，包含了一系列標簽．通過這些標簽可以將網絡上的文檔格式統一，使分散的Internet資源連接為一個邏輯整體，html文本是由html命令組成的描述性文本，html命令可以說明文字，圖形、動畫、聲音、表格、鏈接等，主要和css+js配合使用并構建優雅的前端網頁。
感謝你能夠認真閱讀完這篇文章，希望小編分享的“HTML5.2版本有什么變化”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
