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 就可以利用上這些功能特性。並非所有的瀏覽器都支持這些功能特性，因此你最好是在將它們應用於生產環境之前先檢查一下瀏覽器的支持情況。

大多數使用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>

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

 <article> <h1>The Headline of todays news </h1> <figure> <img src=petrolimage.jpeg <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 允許你創建一個空的<option> 元素。它可以是<optgroup>, <datalist> 或者<select> 元素的子元素。你將會發現這項功能在設計對用戶友好的表單方面時能有所幫助。

為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 </main>< /article>

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>

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

 <img src=theimagefile.jpg width=0 height=0 src="/uploads/allimg/170217/22010Q544-0.jpg" />
新的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 圖像屬性
大多數時候創作者們都喜歡針對不同的屏幕尺寸顯示不同的圖片。這個可以用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 屬性定義了在視窗大於25 em 時圖像寬度為視窗寬度的100%，或者在小於等於25em 時為視圖寬度的60%。
 picture 元素
picture 元素讓你可以針對不同的屏幕尺寸聲明圖片。這個可以通過用<picture> 元素封裝<img> ，並且描述多個<source> 子元素來實現。
 <picture> 標記單獨使用並不會顯示任何東西。你已經被假定會聲明默認的圖像來源作為src 屬性的取值，而可選的圖像來源則會放在scrset 屬性之中，如下所示：
 <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>
總結
以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作能帶來一定的幫助，如果有疑問大家可以留言交流。