HTML 5.1 — 14 項新增特性及使用案例

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

 

　　儘管有一些元素和功能提升被帶進了 HTML 5.1 裡面, 但它仍然是一個小的更新。其中的一些新的元素包含了組合標籤, 現在這樣的元素包括有 <dialog>, <details>, <summary> 以及<picture>, 這樣就為開發者提供了更多表達創意和內容的空間。

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

　　14. 防止網路釣魚攻擊

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

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

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

　　13. 靈活處理圖片標題

　　<figcaption> 標籤表示與 <figure> 元素關聯的標題或圖例，通常作為例如圖片、圖表、插圖等視覺元素的容器。在早期的 HTML 版本中，<figcaption> 只能用作第一個或最後一個 <figure> 的子標籤。HTML5.1 已放寬此限制，現在您可以在 <figure> 容器中的任何位置使用 <figcaption>。

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

　　12. 拼寫檢查

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

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

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

　　11. 空選項

　　新版的 HTML 允許你建立一個空的  <option> 元素。它可以是 <optgroup>, <datalist> 或者 <select> 元素的子元素。你將會發現這項功能在設計對使用者友好的表單方面時能有所幫助。

　　10. 支援 Frame 的全屏

　　為 Frame 開發的布林變數 allowfullscreen 屬性允許您通過使用 requestFullscreen() 方法控制內容是否可以全屏顯示。 例如，我們使用嵌入 YouTube 的播放器的 iframe 做示例。 需要設定 allowfullscreen 屬性才能讓播放器全屏顯示視訊。

<article>
  <header>
  <p><img src="/usericons/16235"> <b>Fred Flintstone</b></p>
  <p><a href="/posts/30934" rel=bookmark>12:44</a> — <a href="#acl-503439551">Private Post</a></p>
  </header>
  <main>
  <p>Check out my new video!</p>
  <iframe title="Video" src="https://youtube.com/?id=92469812" allowfullscreen></iframe>
  </main>
</article>

　　9. 嵌入 header 和 footer

　　HTML5.1 允許你在另一個 header 嵌入 header 和 footer。你可以向頭部元素新增一個 header 或 footer ，假如它們在段落內容裡包含它們自己。假如你想新增詳細闡述諸如 <section> 和 <article> 標籤到語義段落元素，這個特性將變得非常有用。

　　在下面的程式碼中，<article> 標籤包含一個 <header> 標籤，它有個自身包含 <header> 標籤的 <aside> 標籤。

<article>
  <header>
    <h2>Lesson: How to cook chicken</h2>
    <aside>
      <header>
        <h2>About the author: Tom Hank</h2>
        <p><a href="./tomhank/">Contact him!</a></p>
      </header>
      <p>Expert in nothing but Cooking. The cookbook sideshow.</p>
    </aside>
  </header>
  <p><ins>Pour the marinade into the zip-top bag with the chicken and seal it.
          Remove as much air as possible from the bag and seal it. </ins></p>
</article>

　　8. 圖片零寬度

　　HTML 新版本允許你新增零寬度的圖片。當圖片不需要向使用者展示時，可以使用此特性。假如一個 img 元素還有其他用途而不僅僅是展示一個圖片，例如，作為一個服務的一部分用來計算頁面檢視個數，在 width 和 height 屬性中使用 0 數值。對於 0 寬度的圖片，推薦使用空屬性。

<img src="theimagefile.jpg" width="0" height="0" alt="">

　　7. 校驗表單

　　新的 reportValidity() 方法允許你校驗一個表單和重置結果，並且在瀏覽器適合位置向使用者報告錯誤。使用者代理可以報告一個以上的限制規則，假如單一元素同時遇到多個問題。對於這種情況，“密碼”輸入為必填內容但沒有填，將會標識為錯誤。

<h2>Form validation</h2>
<p>Enter details</p>
<form>
  <label>
    Mandatory input <input type="password" name="password" required />
  </label>
  <button type="submit">Submit</button>
</form>
<script>
  document.querySelector('form').reportValidity()
</script>

　　6. 瀏覽器的上下文選單

　　在 HTML 5.1 中, 你可以使用 <menu> 標記來定義選單，裡面包含了一個或者多個 <menuitem> 元素, 然後利用 contextmenu 屬性將其繫結到任何元素上。 <menu> 元素的 id 取值應該與我們想要為其新增上下文選單的元素的 contextmenu 屬性取值保持一致。

　　每一個 <menuitem> 都可以有如下三個表單項中的一個:

• radio – 從一個分組中獲取選項；

• checkbox – 選擇或者取消選擇一個選項；

• command – 在點選時執行一個動作。

<h2 contextmenu="popup-menu">
  Right click to get the context menu demo.
</h2>
 
<menu type="context" id="popup-menu">
  <menuitem type="checkbox" checked="true">Checkbox 1 </menuitem>
  <menuitem type="command" label="Command" onclick="alert('WARNING')">Checkbox 2</menuitem> 
  <menuitem type="radio" name="group1">Radio button a</menuitem>
  <menuitem type="radio" name="group1" checked="true">Radio button b</menuitem>
  <menuitem type="checkbox" disabled>Disabled menu item</menuitem>
</menu>

　　5. 在指令碼和樣式上使用加密隨機數

　　加密隨機數（cryptographic nonce ）是一個隨機生成的數字，只能被使用一次, 而且針對每一次頁面請求，它都得被生成出來。這個 nonce 屬性可以被使用在 <script> 和 <style> 元素中。

　　它一般被用在一個網站的內容安全策略之中，以決定一個特定的樣式和指令碼是否應該在頁面上被實現。在下面所提供的程式碼中，這個 value 是硬編碼的，不過在實際的使用場景中，這個值是隨機生成的。

<script nonce='d3ne7uWP43Bhr0e'>
  The JavaScript Code 
</script>

　　4、反序連結關係

　　rev 屬性在 HTML4 裡有定義，但是它並沒出現在 HTML5 裡。W3C 決定在 <a> 和 <link> 元素裡重新包含 rev 屬性。rev 屬性標識當前和反向的連結文件的關係。它已經被包含來支援廣泛使用資料結構標記格式，RDFa。

　　讓我們用兩個文件來舉個例子，每個包含一課程，在它們之間的連結可以使用如下 rel 和 rev 的屬性來定義。

//Document with URL "chapter1.html"
 
<link href="Lesson2.html" rel="next" rev="prev">
 
 
//Document with URL "chapter2.html"
 
<link href="Lesson1.html" rel="prev" rev="next">
<link href="Lesson3.html" rel="next" rev="prev">

　　3. 顯示/隱藏資訊

　　新的 <details> 和  <summary> 元素允許您向一段內容新增擴充套件資訊。您可以通過單擊元素來顯示或隱藏一個附加資訊塊。 預設情況下是隱藏附加資訊的。

　　在程式碼中，您應該將 <summary> 標記放在 <details> 標記內，如下所示。 <summary> 標籤之後，你可以新增要隱藏的其他內容。

<section>
  <h3>Error Message</h3>
  <details>
  <summary>This file hasn't been download due to network error.</summary>
  <dl>
    <dt>File name:</dt><dd>Passcode.txt</dd>
    <dt>File size:</dt><dd>8 KB</dd>
    <dt>Error code:</dt><dd>342a</dd>
  </dl>
  </details>
</section>

　　2. 更多的輸入項型別

　　HTML 輸入項元素擴充了三個輸入型別 – week, month 以及 datetime-local。

　　正如其名稱所表明的，頭兩個元素可以讓使用者選擇一個星期值和一個月份值。根據瀏覽器的支援情況不同，它們倆都會被渲染成一個下拉顯示的日曆，讓你可以選擇一年中一個特定的星期或者月份。

　　datatime-local 表示的是一個日期和時間的輸入域, 不過沒有時區設定。其資料可以採用跟 month 或者 week 輸入項類似的方法來選定, 而時間可以單獨輸入。

<section>
  <h2> 
    Week, Month and Datetime-local 
  </h2>
  <form action="action_page.php">
    Choose a week:
    <input type="week" name="year_week">
    <input type="submit">
  </form>
  <form action="action_page.php">
    Birthday (month and year):
    <input type="month" name="bdaymonth">
    <input type="submit">
  </form>
  <form action="action_page.php">
    Joining (date and time):
    <input type="datetime-local" name="bdaytime">
    <input type="submit" value="Send">
  </form>
</section>

　　1. 響應式影像

　　W3C 引入了一些功能特性，無需使用 CSS 就可以實現響應式影像。它們是 …

　　srcset 影像屬性

　　srcset 屬性讓你可以指定一個多個可選的影像來源，對應於不同的畫素解析度。它將允許瀏覽器根據使用者裝置的不同選擇合適質量的實現來進行顯示。例如，對於使用網路比較慢的移動裝置的使用者，顯示一張低解析度的圖片會比較好。

　　你可以使用 srcset 屬性並且帶上它自有的 x 修飾符來描述每一個圖片的畫素比例, 如果使用者的畫素比例等於 3，就會顯示 high-res 這張圖片。

<img src="clicks/low-res.jpg" srcset="
  clicks/low-res.jpg 1x, 
  clicks/medium-res.jpg 2x, 
  clicks/high-res.jpg 3x"
>

　　除了畫素比例之外，你也可以選擇使用 w 修飾符來指定不同尺寸大小的圖片。在如下示例中，high-res 圖片被定義成在寬度為 1600px 時顯示。

<img src="clicks/low-res.jpg" srcset="
  clicks/low-res.jpg 500w, 
  clicks/medium-res.jpg 1000w, 
  clicks/high-res.jpg 1600w"
>

　　圖片屬性的大小

　　大多數時間，開發者喜歡根據不同螢幕大小來顯示不同圖片。這樣可以使用 sizes 屬性。它可以讓你把螢幕寬度轉換成圖片所需要的空間，然後使用 srcset 屬性選擇合適圖片。例如：

<img src="clicks/low-res.jpg" sizes="(max-width: 25em) 60vw, 100vw" 
  srcset="clicks/low-res.jpg 500w, 
  clicks/medium-res.jpg 1000w, 
  clicks/high-res.jpg 1600w"
>

　　在這個例子中，sizes 屬性定義圖片寬度為視窗寬度的 100% 時，大於 25em，或者 60% 的寬度時，小於等於 25em。

　　圖片元素

　　圖片元素允許你使用幾個不同螢幕大小的源來定義圖片。這樣可以使用 <picture> 元素裡的 <img >屬性，和描述多個 <source> 子元素。

　　單獨的 <picture> 標籤並不會顯示任何東西。你可以定義預設圖片源作為 src 屬性的值，在 srcset 屬性裡使用可選的圖片源，如下所示：

<picture>
  <source media="(max-width: 25em)" srcset="
    clicks/small/low-res.jpg 1x,
    clicks/small/medium-res.jpg 2x, 
    clicks/small/high-res.jpg 3x
  ">
  <source media="(max-width: 60em)" srcset="
    clicks/large/low-res.jpg 1x,
    clicks/large/medium-res.jpg 2x, 
    clicks/large/high-res.jpg 3x
  ">
 
  <img src="clicks/default/medium-res.jpg">
</picture>

　　原文地址：http://www.rankred.com/whats-new-in-html-5-1-added-features/