HTML 5.2 版本帶來的修改

時間 2020-05-09

標籤 html 5.2 版本帶來修改欄目 HTML 简体版

原文原文鏈接

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

新特性

原生 `<dialog>` 元素

對話框在平時開發中，使用較爲頻繁，HTML 5.2 規範提供了 <dialog> 元素來建立對話框。php

<dialog> 元素默認是隱藏的。css

<!-- 默認是隱藏的 -->
<dialog>
  <h2>Dialog Title</h2>
  <p>Dialog content and other stuff will go here</p>
</dialog>
複製代碼

添加 open 屬性便可顯示。html

<dialog open>
複製代碼

HTMLDialogElement 是 <dialog> 的底層元素表示，提供了 show()、close()、showModal() 方法，控制對話框的顯隱。html5

<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() 是以彈框形式顯示的。java

`allowpaymentrequest` 屬性

如今能夠爲 <iframe> 添加 allowpaymentrequest 屬性的方式，容許 <iframe> 內部網頁使用 Payment Request API。web

<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。app

<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">
複製代碼

（正文完）

廣告時間（長期有效）

我有一位好朋友開了一間貓舍，在此幫她宣傳一下。如今貓舍裏養的都是布偶貓。若是你也是個愛貓人士而且有須要的話，不妨掃一掃她的【閒魚】二維碼。不買也沒關係，看看也行。

（完）

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

HTML 5.2 版本帶來的修改

新特性

原生 <dialog> 元素

allowpaymentrequest 屬性

rel="apple-touch-icon"