2016年11月HTML迎來了一個新的版本規范,w3c稱這個版本為黃金標準,因為它給我們提供了新的方法,我們可以使用HTML來創建更靈活的網絡體驗。

我們來看一下有哪些新方法吧:

1.為響應設計定義多個圖像資源

<picture>

    <source srcset="mobile.jpg, mobile-hd.jpg 2x" media="(max-width: 360px)">

    <source srcset="large.jpg, large-hd.jpg 2x" media="(min-width: 1920px)">

    <img src="default.jpg" srcset="default-hd.jpg 2x" alt="your image">

</picture>

在HTML 5.1中,你可以使用<picture>標簽和srcset屬性來使響應式圖像選擇成為可能。<picture>標簽表示圖像容器,其允許開發者聲明不同的圖像資源以便適應UA的視口大小,屏幕像素密度,屏幕類型和在響應設計中使用的其他參數。

 

2.顯示或隱藏額外信息

<section>

    <h2>Error Message</h2>

    <details>

        <summary>We couldn't finish downloading this video.</summary>

        <dl>

            <dt>File name:</dt><dd>yourfile.mp4</dd>

            <dt>File size:</dt><dd>100 MB</dd>

            <dt>Duration:</dt><dd>00:05:27</dd>

        </dl>

    </details>

</section>

使用<details>和<summary>標簽,可以向內容項添加擴展信息。 默認情況下不顯示額外信息,但如果用戶感興趣,他們可以選擇查看。 在你寫代碼的時候,應該將<summary>標簽放在<details>中。 你可以在<summary>標簽之后添加要隱藏的額外信息。

 

3.將功能添加到瀏覽器的上下文菜單

<button contextmenu="rightclickmenu">Right click me</button>

    <menu type="context" id="rightclickmenu">

    <menuitem type="checkbox" label="I  HTML5.1.">

</menu>

使用<menuitem>元素及其type =“context”屬性,可以將自定義功能添加到瀏覽器的上下文菜單中。你需要將<menuitem>指定為<menu>標簽的子元素。<menu>元素的id需要與我們要添加上下文菜單的元素(即上面示例中的<button>元素)的contextmenu屬性的值相同。

 

注意:瀏覽器對這個功能的支持還不是很好。 Chrome 54并不支持,而Firefox 50僅允許一個額外的上下文菜單。

4.嵌入頁眉和頁腳

<article>

    <header>

        <h1>Article Title</h1>

        <aside>

            <header>

                <h2>About the author</h2>

                <p><a href="#">Email</a><a href="#">Twitter</a></p>

            </header>

            <img src="photo.jpg" alt="Author photo">

            <p>Author bio ... </p>

        </aside>

    </header>

    <p>Article intro</p>

    <p>Other paragraphs ...</p>

</article>

在HTML 5.1中,如果每個級別都包含在分段內容里,則允許嵌套頁眉和頁腳。

 

如果要向語義分段元素(例如<article>和<section>)添加精細的標題話,這個功能會非常有用。 下面的代碼示例在標題中創建一個側邊欄,<aside>標簽也是一個分段元素,并在其中添加了關于作者的額外信息。 標題中的側邊欄也有自己的標題,以及一個副標題和作者的聯系方式。

5.對樣式和腳本使用加密隨機數

<script nonce='adfjaf8eda64U7'>

    // some JavaScript

</script>

使用HTML 5.1,通過在<script>和<style>元素中使用nonce屬性。你可以將加密隨機數添加到樣式和腳本中。加密隨機數是隨機生成的數字并且一個只能使用一次,而且是在每次頁面請求的時候重新生成。網站的內容安全策略可以使用隨機數來決定是否應在網頁上應用特定的腳本或樣式。在Google 開發者的網頁基礎中,你可以進一步了解如何正確使用隨機數和CSP。

 

6.創建反向鏈路關系

<!-- Current document is the parent of the linked category.html document -->

<link rev="parent" href="category.html">

你可以再次將rev屬性添加到你的鏈接。它之前在HTML 4中被定義,但HTML5不支持。 HTML 5.1允許開發人員再次為<link>和<a>元素使用此屬性。rev屬性與rel相反,它指定當前文檔和鏈接文檔在相反方向上的關系(當前文檔與鏈接文檔的關系)。

 

rev屬性已包含在HTML 5.1規范中,主要用于支持RDFa,后者是一種廣泛使用的結構化數據標記格式,并擴展了HTML語言。

7.使用零寬度圖像

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

HTML 5.1允許開發人員創建width屬性值為0的 零寬度圖像 。 如果你想要包含不想向用戶顯示的圖像(例如跟蹤圖像文件)則此功能很有用。建議將零寬度圖像與空alt屬性一起使用。

 

8.分離瀏覽器上下文以防止網絡釣魚攻擊

<a href="#" target="_blank" rel="noopener">

  Your link that won't make troubles

</a>

在你的網站上使用相同的源鏈接最終可能會讓你陷入麻煩。 該漏洞被稱為target =“_ blank”漏洞,這是一個讓討厭的網絡釣魚攻擊。你可以(安全地)測試下這個漏洞是如何在這個機智的Github演示頁上進行攻擊的,你可以在Github上查看該代碼。

 

HTML 5.1已經標準化了rel =“noopener”屬性的用法,它消除了分隔瀏覽器上下文的問題,你可以在<a>和<area>元素中使用rel =“noopener”。

9.創建一個空選項
HTML 5.1允許開發人員創建一個空的<option>元素。<option>標簽可以是<select>,<optgroup>或<datalist>元素的子元素。 如果你不想建議用戶應該選擇哪個選項,以及在想要設計用戶友好的表單時,使用空的<option>可能很有用。

10.更靈活地處理圖形標題
<figcaption>標簽表示<figure>元素的題注或說明,其是用于視覺(例如插圖,照片和圖表)的容器。以前,<figcaption>標記只能用作<figure>元素的第一個或最后一個子元素。HTML 5.1已放松此規則,現在<figcaption>可以出現在其<figure>容器中的任何位置。