欧美大胆a级视,亚洲奷上下激烈啪啪无码,午夜在线视频一区二区三区

主頁 > 知識庫 > 詳解HTML5.2版本帶來的修改

詳解HTML5.2版本帶來的修改

W3C HTML 5.2 規(guī)范中，有一節(jié) 介紹該版本引入的修改，我綜合來自《What’s New in HTML 5.2?》這篇文章的描述，在此列舉對我來說比較重要的部分。

新特性

原生 <dialog> 元素

對話框在平時(shí)開發(fā)中，使用較為頻繁，HTML 5.2 規(guī)范提供了 <dialog> 元素來創(chuàng)建對話框。

<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() 方法，控制對話框的顯隱。

<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)框，打開時(shí)默認(rèn)不能操作背后頁面里的內(nèi)容；而 show() 是以彈框形式顯示的。

allowpaymentrequest 屬性

現(xiàn)在可以為 <iframe> 添加 allowpaymentrequest 屬性的方式，允許 <iframe> 內(nèi)部網(wǎng)頁使用 Payment Request API 。

<iframe allowpaymentrequest>

rel="apple-touch-icon"

我們使用 <link rel="icon"> 指定網(wǎng)頁 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 之前，蘋果 iOS 設(shè)備并不支持 <link rel="icon"> 的 sizes 屬性，而是使用 apple-touch-icon rel 來支持在自家設(shè)備上顯示網(wǎng)頁或安裝網(wǎng)頁應(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è)頁面只能存在一個(gè) <main> 標(biāo)簽，用來表示某個(gè)頁面獨(dú)一無二的主題內(nèi)容。不過，從 HTML 5.2 版本開始，允許一個(gè)頁面中同時(shí)存在多個(gè) <main> 標(biāo)簽，不過只能有一個(gè)顯示的，其他都要用 hidden 屬性隱藏。

<main>...</main>
<main hidden>...</main>
<main hidden>...</main>

注意，其他不顯示的 <main> 都要使用 hidden 屬性隱藏，使用 display: none; 或 visibility: hidden; 的方式的隱藏都是無效的。

<body> 內(nèi) <style>

<style> 之前都是只能在 <head> 內(nèi)定義的，不過隨著 component-ized 開發(fā)模式的增長，將組件樣式就近寫在組件結(jié)構(gòu)旁邊的模式開始流行起來。

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>

但最好還是不要這樣做，把樣式寫在中是更推薦的做法。規(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> 可能會導(dǎo)致之前元素的布局改變，令頁面發(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 開始，可以使用標(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() 方法

新的無效實(shí)踐

<p> 中的無效內(nèi)容

以下三類元素不能作為 <p> 段落的內(nèi)容。

行內(nèi)塊、表格元素（Inline blocks、inline tables）
浮動元素（floated）
定位元素（positioned block-level elements）

strict doctype

HTML4 和 XHTML1 的嚴(yán)格文檔類型聲明（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版本帶來的修改的文章就介紹到這了,更多相關(guān)HTML5.2版本內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！

標(biāo)簽：青島永州西藏漯河池州新疆棗莊遼源

巨人網(wǎng)絡(luò)通訊聲明：本文標(biāo)題《詳解HTML5.2版本帶來的修改》，本文關(guān)鍵詞詳解,HTML5.2,版本,帶來,的,；如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問題，煩請?zhí)峁┫嚓P(guān)信息告之我們，我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò)，涉及言論、版權(quán)與本站無關(guān)。