HTML 5.1概覽

兩年前HTML5標準的發布對于web開發社區來說是一件大事。不僅是因為它包含了一系列讓人印象深刻的新特性, 還因為它是1999年發布的HTML4.01標準以后，對HTML的第一個大版本更新。你現在依然可以看到一些網站夸耀他們在使用“現代”的HTML5標準。

幸運的是我們不需為下一次HTML標準的更新等待那么長時間。2015年10月，W3C開始著手HTML5.1草案，其目標是修復一些HTML5遺留的問題。多次迭代后, 草案于2016年6月達到“候選建議（Candidate Recommendation）”階段，2016年9月達到“提議建議（Proposed Recommendation）”，最終2016年11月發布W3C 建議。關注新標準的人可能注意到了，這是一段曲折之路。很多開始提出的HTML5.1特性因為不好的設計或者缺少瀏覽器廠商支持而被廢棄了。

盡管HTML5.1仍然在發展, W3C已經開始著手HTML5.2草案，該標準預計2017年末發布。本文是對HTML5.1一些有趣的新特性和提升的概覽。瀏覽器對這些特性依然缺乏支持，但是至少我們會告訴你一些支持這些特性的瀏覽器，用來測試每個例子。

HTML5.1草案介紹了兩種不同的menu元素: context和toolbar。前者用來擴展本地上下文菜單，通常被頁面上的鼠標右擊激活；后者用來定義一個普通的菜單組件。在發展過程中，toolbar 被放棄了，但是context菜單保存了下來。

可以使用 menu 標簽來定義一個包含一個或幾個 menuitem 元素的菜單，然后把它綁定到任何使用contextmenu 屬性的元素上。

每個 menuitem 可以是以下三種類型之一:

checkbox – 允許選擇或者取消選擇一個選項(option);

command – 允許在單擊鼠標時執行一個動作;

radio – 允許在一組選項中選擇一個.

這里有一個基本的使用例子，可以在Firefox49中運行， 但是Chrome54目前不行。

請看SitePoint (@SitePoint)在CodePen上HTML5.1菜單例子。

在一個支持的瀏覽器上，這個上下文菜單的例子應該看起來這樣：

上下文菜單中有自定義項。

新的 details 和 summary 元素可以通過鼠標點擊實現附加信息的展示和隱藏。這是使用JavaScript時候經常在干的事，現在可以使用 details 元素和 summary 元素代勞了。點擊 summary 元素可以展示和隱藏details元素的其余部分.

下面的例子可以在Firefox和Chrome中進行測試。

請看SitePoint (@SitePoint)在CodePen上HTML5.1 細節和總結 demo。

這個demo在支持的瀏覽器上應該是下面這樣：

input擴展了三種類型: month， week 和datetime-local。

前兩種類型讓你可以選擇周或者月。在Chrome中兩者都渲染成下拉的日歷，可以選擇某周或者某月。當你用JavaScript獲得它們的值，你將得到一個大致這樣的字符串： 2016-W43 （week input）； 2016-10 （month input）。

最初，HTML5.1草案介紹了兩種日期類型input — datetime和datetime-local。不同的是，datetime-local 使用用戶時區, 而datetime允許你選擇時區。發展過程中，datetime 被放棄了，現在只有datetime-local存在。datetime-local input由兩部分組成 — 日期，可以像week 和 month一樣進行選擇；時間, 可以單獨輸入。

下面是關于所有新類型input的例子，它在chrome中可以正常展示，但是firfox不行。

請看SitePoint (@SitePoint)在CodePen上HTML 5.1 week, month 和 datetime inputs。

這個demo在支持的瀏覽器上應該是下面這樣：

HTML5.1包括幾個在不使用CSS情況下實現響應式圖片的新特性。每個特性都有自己單獨的使用場景。

srcset屬性

srcset圖像屬性允許列出多個可用于替代的圖片數據源，這些數據源的像素密度不同。這使得瀏覽器可以針對用戶設備選擇合適質量的圖片（由設備的像素密度、縮放比例或者網速決定）。例如，在低速手機網絡和小屏幕手機的情況下，應該為用戶提供低像素的圖片。

srcset屬性接受一個用逗號分隔的URL列表，每個URL帶有一個表示最接近所請求圖片像素比（一個CSS像素所代表的物理像素數量）的修飾x。下面是一個簡單的例子：

 img src= images/low-res.jpg srcset=  images/low-res.jpg 1x,  images/high-res.jpg 2x,  images/ultra-high-res.jpg 3x  

在這個例子中，如果用戶設備的像素比是1，圖片low-res將會被展示；如果是2，圖片high-res將會被展示；如果是3或者更大，圖片ultra-high-res將會被展示。

或者，你可以選擇將圖片展示成不同尺寸。這需要使用w：

 img src= images/low-res.jpg srcset=  images/low-res.jpg 600w,  images/high-res.jpg 1000w,  images/ultra-high-res.jpg 1400w  

在這個例子中，圖片low-res被定義成600px寬，圖片high-res被定義成1000px寬，ultra-high-res是1400px寬。

sizes屬性

你可能想根據用戶屏幕尺寸來使用不同方式展示圖片。例如，你可能想在寬屏幕上用兩欄展示圖片，窄一些的屏幕上用一欄。這點用sizes屬性就可以實現。它允許你為圖片分配屏幕的寬度，然后通過srcset屬性選擇合適的圖片。下面是一個例子：

 img src= images/low-res.jpg sizes= (max-width: 40em) 100vw, 50vw  srcset= images/low-res.jpg 600w,  images/high-res.jpg 1000w,  images/ultra-high-res.jpg 1400w  

當視口寬度大于40em時，sizes屬性把圖片的寬度定義為視口寬度的50%；當視口（viewport）寬度小于或者等于40em時，把圖片寬度定義為視口寬度的100%。

picture元素

如果根據屏幕不同改變圖片的尺寸還是不能滿足需求，你想根據屏幕不同展示不同的圖片，那就需要使用picture元素。它允許你通過用 picture 指定多個不同 source 元素，來為不同尺寸的屏幕定義不同資源的圖片。 source 元素作為URL加載圖片的來源。

 picture  source media= (max-width: 20em) srcset=  images/small/low-res.jpg 1x, images/small/high-res.jpg 2x,  images/small/ultra-high-res.jpg 3x source media= (max-width: 40em) srcset=  images/large/low-res.jpg 1x, images/large/high-res.jpg 2x,  images/large/ultra-high-res.jpg 3x
 img src= images/large/low-res.jpg  /picture 

如果你想知道更多關于響應式圖片的東西，請戳How to Build Responsive Images with srcset.

HTML5定義的form.checkValidity()方法可以檢查表單是否符合事先定義好的驗證器然后返回一個布爾值。新的reportValidity() 方法很相似 — 它也可以檢驗一個表單并返回結果，但是它還能為用戶報告錯誤。下面是一個例子（請在Firefox或Chrome中測試）：

請在CodePen上看SitePoint (@SitePoint)的例子HTML 5.1 report validity demo。

First name 輸入框被要求非空，如果不填寫它將被標記有錯誤。如果符合預期，它將是這樣：

frames新的布爾屬性allowfullscreen可以控制內容是否可以通過requestFullscreen()方法來全屏展示內容。

新的element.forceSpellCheck()方法允許你在text元素上觸發拼寫檢查。這也是本文所列出的所有特性中第一個還不被任何瀏覽器支持的特性。也許，這可以用來進行檢查還沒有被用戶直接編輯的元素。

一些特性在第一版的草案中被定義但是最終被刪除了，大部分原因是瀏覽器廠商缺乏興趣。下面是其中一些有趣的方法：

inert屬性

inert屬性可以禁用所有子元素的用戶交互，就像給所有子元素都加了disabled屬性。

dialog元素

dialog 元素提供一個原生的彈出框，它甚至有一個方便的表單集合 - 在 dialog 上使用method屬性可以阻止表單提交到服務器上，而是關閉彈出框并把結果返回給彈出框的建立者。

這個特性似乎在firfox仍然支持，所以可以看看下面這個例子（譯者注：firfox V49.0.2不支持：

請看SitePoint (@SitePoint)在CodePen的例子 HTML dialog element。

這不是一個關于HTML5.1所有新特性的文章。有許多小的新特性、改變已經從現行標準中刪除，還有一些從未使用的特性也被刪除了。

【相關推薦】

1. HTML5開發手機應用-詳細介紹viewport的作用（圖文）

2. 20分鐘看懂html5 看看H5都有啥新特性

3. H5學習之旅-H5的新特性（1）

以上就是HTML5.1中有哪些新特性？的詳細內容，其它編程語言

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。