HTML 5.1 -- 14項新增功能及如何使用 - BeautifulBoy－IT工程師數位筆記本

文章出處

最近太忙了過完年來連續的加班讓我筋疲力盡，今天終于把東西交了，抽空來點干貨吧！

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>

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>

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>

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

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

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

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

<script nonce='d3ne7uWP43Bhr0e'>

  The JavaScript Code 

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

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>

8. 圖片零寬度

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

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

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>

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>

11. 空選項

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

12. 拼寫檢查

spellcheck 是一個取值可以為空字符串、true 和 false 的枚舉屬性。如果指定其狀態為 true，就表示元素將會接受對其的拼寫和語法檢查。
element.forceSpellCheck() 將強制用戶代理在文本元素上報告檢查出來的拼寫和語法錯誤，即使用戶從來沒將輸入聚焦在該元素上。

<p spellcheck="true">

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

</p>

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>

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>

文章列表