每一個前端工程師都應該瞭解的HTML5.2

時間 2019-11-17

原文原文鏈接

HTML5.2的到來

通常在W3C當中.對版本的發佈會通過四個階段分別是:工做草案（WD）、備選推薦標準（CR）、提案推薦標準（PR）和最終的W3C正式推薦標準（REC）.而當一個規範到達REC階段時，就意味着它已經獲得了W3C成員的正式承認，並推薦它由用戶代理部署，前端工程師進行使用。javascript

如今,就在2017年12月14日W3C發佈了HTML規範5.2更新版本,這個版本相對以前的版原本說有了一些增長和刪除.對於這些變動,均可以在HTML 5.2 Changes這個頁面上看到.而下面我會對這些變動中某些內容進行介紹.html

新增的dialog元素

在HTML5.2中新增了dialog這個標籤.來幫助咱們快速實現一個對話框.在HTML5.2以前咱們想實現一個對話框功能,大概的實現方式的是:一個div,先將它display: none隱藏掉.而後在須要的地方再講其display置爲block.這樣就能控制一個對話框的顯示和隱藏.而在HTML5.2中,你只須要這寫:前端

<dialog id="dialog">
    <h2>我是對話框標題</h2>
    <p>我是對話框內容</p>
</dialog>
複製代碼

就能夠獲得一個對話框.默認狀況下這個對話框是隱藏的,你能夠給他添加open屬性讓他顯示出來html5

<dialog id="dialog" open>
    <h2>我是對話框標題</h2>
    <p>我是對話框內容</p>
</dialog>
複製代碼

同時,也能夠拿到這個dialog元素,而後調用它的show()方法讓他顯示java

<dialog id="dialog" open>
    <h2>我是對話框標題</h2>
    <p>我是對話框內容</p>
</dialog>

<script> const dialog = document.querySelector('#dialog').show(); </script>
複製代碼

一樣的,若是那你想要這個對話框隱藏,只須要調用這個dialog元素的close()方法便可瀏覽器

此外,當你想要在顯示對話框的同時,有一個遮罩層的話.你可使用showModal()這個方法.它會在顯示對話框的同時,在你頁面的頂層顯示一個遮罩層,以防止你去操做除對話框之外的它元素.另外要注意一點的是open屬性和showModal()不能同時使用,不然會報;Untitled-1.html:28 Uncaught DOMException: Failed to execute 'showModal' on 'HTMLDialogElement': The element already has an 'open' attribute, and therefore cannot be opened modally.這個錯誤前端工程師

最後dialog的兼容性以下:工具

支付請求API --- allowpaymentrequest

在HTML5.2以前.對於支付請求的API是不能在iframe中來完成的.因此每次咱們在進行移動支付時都須要跳轉到另一個支付頁面才能完成付款.而如今,使用allowpaymentrequest屬性應用在iframe上網站

<iframe allowpaymentrequest>
複製代碼

這樣,就可讓iframe使用Payment Request API從而讓ui

嵌入了第三方內容的頁面可以控制該第三方內容是否可向用戶請求獲取支付憑證，進而讓可嵌入的購物車工具能夠利用Payment Request API。

來自Forrester的Brendan Miller闡述了支付請求API所帶來的好處，他說：該新標準讓開發者能夠建立一個簡化的結賬頁面，用戶能夠重複使用保存的付款和地址信息來加快結帳速度，並減小錯誤輸入。

Payment Request API的兼容性:

在頁面上同時使用多個`main`標籤

HTML Main元素<main>呈現了文檔<body>或應用的主體部分。主體部分由與文檔直接相關，或者擴展於文檔的中心主題、應用的主要功能部分的內容組成。這部份內容在文檔中應當是獨一無二的，不包含任何在一系列文檔中重複的內容，好比側邊欄，導航欄連接，版權信息，網站logo，搜索框（除非搜索框做爲文檔的主要功能）。

上面是一段是MDN上對於<main>標籤的介紹.其中說明了<main>標籤中的內容應該是文檔的主題內容,而且是獨一無二的.因此,在這段介紹後面有一點注意在一個文檔中不能出現一個以上的<main>標籤

而如今,隨着單頁面應用(SPA)的愈來愈流行.使得這一特性的已經不符合當下的實景,因此在HTML5.2中.在頁面中同時出現多個<main>標籤是被容許的.只要在同一時間內,只有一個<main>標籤是對外顯示的,其餘全部都是被hidden屬性隱藏的便可

<main>...</main>
<main hidden>...</main>
<main hidden>...</main>
複製代碼

此外要注意,隱藏<main>標籤的方法必須是使用hidden屬性才行.其它的如:display: none、透明的爲0等方法不行.這會讓<main>標籤失去本身的語義和做用.

被刪除的屬性和元素

被刪除的元素

keygen：用於幫助生成表單的公鑰
menu和menuitem：用於建立導航或上下文菜單

被刪除的屬性

Window.showModalDialog(): 建立並顯示一個包含指定HTML文檔的模態框。
插件API: 提供有關瀏覽器插件的信息 .

廢棄的HTML頭部聲明

如下兩種HTML的頭部聲明已在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的一些粗淺的總結,但願對你們有所幫助.若是文中有何不當之處請予以斧正,謝謝.

參考資料

個人我的網址: wangyiming.info

相關標籤/搜索

每日一句

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