HTML5.1中的新特性有哪些？相信大部分人對(duì)HTML5.1中的新特性不了解，為了讓大家更加了解HTML5.1中的新特性，小編給大家總結(jié)了以下詳細(xì)內(nèi)容，一起漲知識(shí)吧。

創(chuàng)新互聯(lián)堅(jiān)持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：網(wǎng)站設(shè)計(jì)制作、網(wǎng)站建設(shè)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿(mǎn)足客戶(hù)于互聯(lián)網(wǎng)時(shí)代的蒙陰網(wǎng)站設(shè)計(jì)、移動(dòng)媒體設(shè)計(jì)的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！

HTML 5.1概覽　

兩年前HTML5標(biāo)準(zhǔn)的發(fā)布對(duì)于web開(kāi)發(fā)社區(qū)來(lái)說(shuō)是一件大事。不僅是因?yàn)樗艘幌盗凶屓擞∠笊羁痰男绿匦? 還因?yàn)樗?999年發(fā)布的HTML4.01標(biāo)準(zhǔn)以后，對(duì)HTML的第一個(gè)大版本更新。你現(xiàn)在依然可以看到一些網(wǎng)站夸耀他們?cè)谑褂谩艾F(xiàn)代”的HTML5標(biāo)準(zhǔn)。

　　幸運(yùn)的是我們不需為下一次HTML標(biāo)準(zhǔn)的更新等待那么長(zhǎng)時(shí)間。2015年10月，W3C開(kāi)始著手HTML5.1草案，其目標(biāo)是修復(fù)一些HTML5遺留的問(wèn)題。多次迭代后, 草案于2016年6月達(dá)到“候選建議（Candidate Recommendation）”階段，2016年9月達(dá)到“提議建議（Proposed Recommendation）”，最終2016年11月發(fā)布W3C 建議。關(guān)注新標(biāo)準(zhǔn)的人可能注意到了，這是一段曲折之路。很多開(kāi)始提出的HTML5.1特性因?yàn)椴缓玫脑O(shè)計(jì)或者缺少瀏覽器廠(chǎng)商支持而被廢棄了。

　　盡管HTML5.1仍然在發(fā)展, W3C已經(jīng)開(kāi)始著手HTML5.2草案，該標(biāo)準(zhǔn)預(yù)計(jì)2017年末發(fā)布。本文是對(duì)HTML5.1一些有趣的新特性和提升的概覽。瀏覽器對(duì)這些特性依然缺乏支持，但是至少我們會(huì)告訴你一些支持這些特性的瀏覽器，用來(lái)測(cè)試每個(gè)例子。

　　上下文菜單使用menu和menuitems元素

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

　　可以使用 <menu> 標(biāo)簽來(lái)定義一個(gè)包含一個(gè)或幾個(gè) <menuitem> 元素的菜單，然后把它綁定到任何使用contextmenu 屬性的元素上。

　　每個(gè) <menuitem> 可以是以下三種類(lèi)型之一:

• checkbox – 允許選擇或者取消選擇一個(gè)選項(xiàng)(option);

• command – 允許在單擊鼠標(biāo)時(shí)執(zhí)行一個(gè)動(dòng)作;

• radio – 允許在一組選項(xiàng)中選擇一個(gè).

　　這里有一個(gè)基本的使用例子，可以在Firefox49中運(yùn)行， 但是Chrome54目前不行。

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

　　在一個(gè)支持的瀏覽器上，這個(gè)上下文菜單的例子應(yīng)該看起來(lái)這樣：

　　上下文菜單中有自定義項(xiàng)。

　　細(xì)節(jié)（Details）和總結(jié)（Summary）元素

　　新的<details>和<summary>元素可以通過(guò)鼠標(biāo)點(diǎn)擊實(shí)現(xiàn)附加信息的展示和隱藏。這是使用JavaScript時(shí)候經(jīng)常在干的事，現(xiàn)在可以使用<details>元素和<summary>元素代勞了。點(diǎn)擊<summary>元素可以展示和隱藏details元素的其余部分.

　　下面的例子可以在Firefox和Chrome中進(jìn)行測(cè)試。

　　請(qǐng)看SitePoint (@SitePoint)在CodePen上HTML5.1 細(xì)節(jié)和總結(jié) demo。

　　這個(gè)demo在支持的瀏覽器上應(yīng)該是下面這樣：

　　更多的input類(lèi)型 - month，week 和 datetime-local

　　input擴(kuò)展了三種類(lèi)型: month， week 和datetime-local。

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

　　最初，HTML5.1草案介紹了兩種日期類(lèi)型input — datetime和datetime-local。不同的是，datetime-local 使用用戶(hù)時(shí)區(qū), 而datetime允許你選擇時(shí)區(qū)。發(fā)展過(guò)程中，datetime 被放棄了，現(xiàn)在只有datetime-local存在。datetime-local input由兩部分組成 — 日期，可以像week 和 month一樣進(jìn)行選擇；時(shí)間, 可以單獨(dú)輸入。

　　下面是關(guān)于所有新類(lèi)型input的例子，它在chrome中可以正常展示，但是firfox不行。

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

　　這個(gè)demo在支持的瀏覽器上應(yīng)該是下面這樣：

　　響應(yīng)式圖片

　　HTML5.1包括幾個(gè)在不使用CSS情況下實(shí)現(xiàn)響應(yīng)式圖片的新特性。每個(gè)特性都有自己?jiǎn)为?dú)的使用場(chǎng)景。

　srcset屬性

　　srcset圖像屬性允許列出多個(gè)可用于替代的圖片數(shù)據(jù)源，這些數(shù)據(jù)源的像素密度不同。這使得瀏覽器可以針對(duì)用戶(hù)設(shè)備選擇合適質(zhì)量的圖片（由設(shè)備的像素密度、縮放比例或者網(wǎng)速?zèng)Q定）。例如，在低速手機(jī)網(wǎng)絡(luò)和小屏幕手機(jī)的情況下，應(yīng)該為用戶(hù)提供低像素的圖片。

　　srcset屬性接受一個(gè)用逗號(hào)分隔的URL列表，每個(gè)URL帶有一個(gè)表示最接近所請(qǐng)求圖片像素比（一個(gè)CSS像素所代表的物理像素?cái)?shù)量）的修飾x。下面是一個(gè)簡(jiǎn)單的例子：

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

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

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

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

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

　　sizes屬性

　　你可能想根據(jù)用戶(hù)屏幕尺寸來(lái)使用不同方式展示圖片。例如，你可能想在寬屏幕上用兩欄展示圖片，窄一些的屏幕上用一欄。這點(diǎn)用sizes屬性就可以實(shí)現(xiàn)。它允許你為圖片分配屏幕的寬度，然后通過(guò)srcset屬性選擇合適的圖片。下面是一個(gè)例子：

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

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

　　picture元素

　　如果根據(jù)屏幕不同改變圖片的尺寸還是不能滿(mǎn)足需求，你想根據(jù)屏幕不同展示不同的圖片，那就需要使用picture元素。它允許你通過(guò)用<picture>指定多個(gè)不同<source>元素，來(lái)為不同尺寸的屏幕定義不同資源的圖片。<source>元素作為URL加載圖片的來(lái)源。

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

　　如果你想知道更多關(guān)于響應(yīng)式圖片的東西，請(qǐng)戳How to Build Responsive Images with srcset.

　　用form.reportValidity()驗(yàn)證表單

　　HTML5定義的form.checkValidity()方法可以檢查表單是否符合事先定義好的驗(yàn)證器然后返回一個(gè)布爾值。新的reportValidity() 方法很相似 — 它也可以檢驗(yàn)一個(gè)表單并返回結(jié)果，但是它還能為用戶(hù)報(bào)告錯(cuò)誤。下面是一個(gè)例子（請(qǐng)?jiān)贔irefox或Chrome中測(cè)試）：

　　請(qǐng)?jiān)贑odePen上看SitePoint (@SitePoint)的例子HTML 5.1 report validity demo。

　　"First name"輸入框被要求非空，如果不填寫(xiě)它將被標(biāo)記有錯(cuò)誤。如果符合預(yù)期，它將是這樣：

　　frames的AllowfullscreenFrames的Allowfullscreen屬性

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

　　使用element.forceSpellCheck()進(jìn)行拼寫(xiě)檢查

　　新的element.forceSpellCheck()方法允許你在text元素上觸發(fā)拼寫(xiě)檢查。這也是本文所列出的所有特性中第一個(gè)還不被任何瀏覽器支持的特性。也許，這可以用來(lái)進(jìn)行檢查還沒(méi)有被用戶(hù)直接編輯的元素。

　　沒(méi)有寫(xiě)進(jìn)HTML5.1的特性

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

　inert屬性

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

dialog元素

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

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

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

以上HTML5.1中的新特性就是的詳細(xì)內(nèi)容了，看完之后是否有所收獲呢？如果想了解更多相關(guān)內(nèi)容，歡迎來(lái)創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計(jì)公司行業(yè)資訊！

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線(xiàn)，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性?xún)r(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專(zhuān)為企業(yè)上云打造定制，能夠滿(mǎn)足用戶(hù)豐富、多元化的應(yīng)用場(chǎng)景需求。

網(wǎng)站題目：HTML5.1中的新特性-創(chuàng)新互聯(lián)
瀏覽地址：http://www.rwnh.cn/article20/cspgco.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站建設(shè)、網(wǎng)站導(dǎo)航、域名注冊(cè)、外貿(mào)網(wǎng)站建設(shè)、全網(wǎng)營(yíng)銷(xiāo)推廣、小程序開(kāi)發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀(guān)點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)