HTML 5之新增的特性該如何使用

這次帶給大家HTML 5之新增的特性該如何使用，HTML 5之新增的特性使用的注意事項有哪些，下面就是實戰案例，一起來看一下。

前言

眾所周知HTML5 屬於萬維網聯盟 (W3C), 這個組織為整個網路界提供了標準，如此形成的協議可在全世界通行。在 2016 年 11 月， W3C 對長期行使的 HTML 5 標準進行了更新，它是2年內的第一次小更新。許多最開始提出的 HTML 5.1 功能特性都因為設計上的缺陷和缺乏瀏覽器廠商的支援而去掉了。

儘管有一些元素和功能提升被帶進了 HTML 5.1 裡面, 但它仍然是一個小的更新。其中的一些新的元素包含了組合標籤, 現在這樣的元素包括有

,

,

以及, 這樣就為開發者提供了更多表達創意和內容的空間。

W3C 以及開始著手發展 HTML 5.2 草案，預計 2017 年底發布。而我們在這裡所要呈現的是在版本 5.1 中被引入的新的功能特性和功能提升。你不需要動 javascript 就可以利用這些功能特性。並非所有的瀏覽器都支援這些功能特性，因此你最好是在將它們應用於生產環境之前先檢查一下瀏覽器的支援情況。

 防止網路釣魚攻擊

大多數使用target ='_ blank' 的人都不知道一個有趣的事實－新開啟的標籤可以改變window.opener.location 到一些網路釣魚頁面。它會在開放頁面上代表你執行一些惡意 JavaScript 程式碼。因為使用者相信開啟的頁面已安全，所以他們不會有所懷疑。

為了完全消除這個問題，HTML 5.1 已經透過隔離瀏覽器上下文的方式標準化了的 rel=”noopener」屬性的用法。 rel =“noopener”可以在 和 標籤中使用。

<a href="#" target="_blank" rel="noopener">
  The link won&#39;t make trouble anymore
</a>

靈活處理圖片標題

標籤表示與

元素關聯的標題或圖例，通常作為例如圖片、圖表、插圖等視覺元素的容器。在早期的 HTML 版本中，

只能用作第一個或最後一個

的子標籤。 HTML5.1 已放寬此限制，現在您可以在

容器中的任何位置使用

。

<article>
  <h1>The Headline of todays news </h1>
  <figure>
    <img src="petrolimage.jpeg" alt="Petrol price drops">
    <figcaption>A man fueling up his car at petrol station</figcaption>
  </figure>
  <p>This is the forth hike in petrol prices in two month and the third in case of diesel in one fortnight.</p>
</article>

spellcheck 是一個取值可以為空字串、true 和 false 的枚舉屬性。如果指定其狀態為 true，就表示元素將接受對其的拼字和語法檢查。

element.forceSpellCheck() 將強制使用者代理程式在文字元素上報告檢查出來的拼字和語法錯誤，即使使用者從來沒將輸入聚焦在該元素上。

<p spellcheck="true">
 <label>Name: <input spellcheck=" false" id="textbox"></label>
</p>

新版的 HTML 讓你建立一個空的  元素。它可以是 ,