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

玉鴦發表於2018-01-09
前端工程師HTML

HTML5.2的到來

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

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

  現在,就在2017年12月14日W3C釋出了HTML規範5.2更新版本,這個版本相對之前的版本來說有了一些增加和刪除.對於這些變更,都可以在HTML 5.2 Changes這個頁面上看到.而下面我會對這些變更中某些內容進行介紹.

新增的dialog元素

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

<dialog id="dialog">
    <h2>我是對話方塊標題</h2>
    <p>我是對話方塊內容</p>
</dialog>
複製程式碼

就可以得到一個對話方塊.預設情況下這個對話方塊是隱藏的,你可以給他新增open屬性讓他顯示出來

<dialog id="dialog" open>
    <h2>我是對話方塊標題</h2>
    <p>我是對話方塊內容</p>
</dialog>
複製程式碼

同時,也可以拿到這個dialog元素,然後呼叫它的show()方法讓他顯示

<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的相容性如下:

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

支付請求API --- allowpaymentrequest

在HTML5.2之前.對於支付請求的API是不能在iframe中來完成的.所以每次我們在進行移動支付時都需要跳轉到另外一個支付頁面才能完成付款.而現在,使用allowpaymentrequest屬性應用在iframe上

<iframe allowpaymentrequest>
複製程式碼

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

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

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

Payment Request API的相容性:

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

在頁面上同時使用多個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的一些粗淺的總結,希望對大家有所幫助.如果文中有何不當之處請予以斧正,謝謝.

參考資料

我的個人網址: www.wangyiming19950222.com

相關文章