21世紀(jì)，2016年6月，HTML

5.1從工作草案變?yōu)榱撕蜻x標(biāo)準(zhǔn)。正如你了解的那樣，這是將提案變?yōu)闃?biāo)準(zhǔn)的第二步，無(wú)限互聯(lián)Web前端培訓(xùn)專(zhuān)家認(rèn)為，Web的如此發(fā)展也將影響我們的日常生活。作為候選標(biāo)準(zhǔn)，W3C認(rèn)為HTML

5.1已經(jīng)通過(guò)了review并且能夠滿足工作組的技術(shù)需求了。

無(wú)限互聯(lián)Web培訓(xùn)專(zhuān)家了解到，幾天前，HTML5.1被提案進(jìn)入第三階段：推薦標(biāo)準(zhǔn)(PR)。這意味著這個(gè)規(guī)范只需要進(jìn)行微量的修改就可以進(jìn)入W3C標(biāo)準(zhǔn)的最后一階段了。

隨著HTML5.1接近最后階段，工作組開(kāi)始關(guān)注于未來(lái)。于是工作組正式開(kāi)始研究HTML5.2工作草案，因此，W3C在社區(qū)中發(fā)布了HTML5.2規(guī)范來(lái)讓W(xué)3C成員、公眾以及其他組織進(jìn)行review。

HTML5憑借語(yǔ)義性、兼容性和不需要第三方依賴(lài)的API迅速席卷了整個(gè)互聯(lián)網(wǎng)。這是一場(chǎng)革命性的技術(shù)變革。HTML5.1保留了先前版本全部?jī)?yōu)良的特性又引入了一些語(yǔ)義元素的重大改進(jìn)。想想HTML5.1都帶來(lái)了什么，可想而知HTML5.2會(huì)更為驚艷。

Web培訓(xùn)學(xué)院：HTML5.2所需學(xué)習(xí)的Web技術(shù)

無(wú)限互聯(lián)Web培訓(xùn)專(zhuān)家將做一個(gè)關(guān)于HTML發(fā)展的簡(jiǎn)短的概述，包括HTML5，HTML5.1，和HTML5.2中引入和廢除的特性。

以下是本文的重點(diǎn)：

HTML5引入的語(yǔ)義元素概述;

關(guān)于HTML5和HTML5.1中新特性和未定案特性的變化;

HTML5.2的介紹以及對(duì)于接下來(lái)可能發(fā)生的事的猜想;

1、HTML5新的語(yǔ)義元素

HTML5.1最偉大的創(chuàng)新之一就是引入了新的語(yǔ)義元素。它們也許(很有可能)會(huì)成為你如今日常寫(xiě)碼的一部分。就是因?yàn)橛辛藰?biāo)記性的結(jié)構(gòu)和語(yǔ)義，才使我們的站點(diǎn)有了很大改善。

無(wú)限互聯(lián)Web培訓(xùn)專(zhuān)家將主要提到的元素有：

main定義主要內(nèi)容;

nav定義主體模塊或者導(dǎo)航鏈接的集合;

article包含獨(dú)立于頁(yè)面其他部分的內(nèi)容;

header包含介紹部分或者是導(dǎo)航鏈接的集合;

footer定義了整個(gè)頁(yè)面或其中一部分的頁(yè)腳(并且通常包含原創(chuàng)作者，版權(quán)信息，聯(lián)系方式和站點(diǎn)地圖);

aside定義了所處內(nèi)容的側(cè)邊欄，section定義了文檔中特定的部分。

將兩個(gè)革命性的元素單獨(dú)拿出來(lái)說(shuō)，它們幫助我們解決了Flash等技術(shù)難題：

audio用來(lái)在文檔中嵌入音頻內(nèi)容

video用來(lái)在文檔中嵌入視頻內(nèi)容

在上面提到的所有元素中，最有爭(zhēng)議的無(wú)非是main元素。在W3C規(guī)范的描述中它是頁(yè)面中的主要內(nèi)容，然而萬(wàn)維網(wǎng)超文本應(yīng)用技術(shù)工作組(WHATWG)卻定義main元素為其他元素主要內(nèi)容的容器。由于這個(gè)區(qū)別，WHATWA沒(méi)有限制一個(gè)文檔中main元素出現(xiàn)的次數(shù)。按WHATWA的定義，如果你在一個(gè)頁(yè)面中定義了多個(gè)article元素，你就可以給每個(gè)article標(biāo)記main元素。

現(xiàn)在讓我們一起跟隨無(wú)限互聯(lián)Web培訓(xùn)專(zhuān)家來(lái)看一下HTML5和HTML5.1中的不同。

2、HTML5和HTML5.1的不同之處

這部分將主要介紹HTML

5.1中一些尚未確定的元素、方法和屬性。無(wú)限互聯(lián)Web培訓(xùn)專(zhuān)家將就其概念和優(yōu)點(diǎn)進(jìn)行介紹，并且提供了一些其他資料，如果感興趣可以進(jìn)行擴(kuò)展閱讀。需要注意的是，這里提到的大部分新元素都在HTML5中被提出卻因?yàn)槟承┰驔](méi)有通過(guò)提案，所以對(duì)你來(lái)說(shuō)也許并不陌生。例如details和summary就是從HTML

5轉(zhuǎn)移至HTML5.1規(guī)范中的。

就像其他規(guī)范一樣，HTML5.1也引入了一些被移除不久的特性。其中之一就是inert屬性，它在2014年被提出。正如Github上這個(gè)discussion中所提到的，這個(gè)屬性自從被歸入dialog元素后就被遺棄了。

開(kāi)始使用新的元素吧~

HTML5.1引入的新元素

第一個(gè)準(zhǔn)備講的就是picture元素。它的用處就是把source元素和srcset屬性結(jié)合到一起，更方便的是當(dāng)網(wǎng)頁(yè)展示在小屏幕(例如移動(dòng)設(shè)備)上時(shí)，它可以提供內(nèi)存和尺寸較小的圖片。

picture元素的另一個(gè)功能就是當(dāng)頁(yè)面加載在高分辨率屏幕上的時(shí)候就提供高密度的圖片。由于這個(gè)元素的存在，你可以更好的給用戶展示圖片并且很好的避免過(guò)大的高密度圖片與網(wǎng)站不相稱(chēng)。如果你想更多的了解，可以點(diǎn)擊無(wú)限互聯(lián)Web培訓(xùn)官網(wǎng)了解更多!

接下來(lái)介紹dialog元素，當(dāng)下有Chrome和Opera已經(jīng)對(duì)其進(jìn)行支持，微軟Edge則仍在考慮中。這個(gè)元素可以用來(lái)作為對(duì)話框，確認(rèn)框或者窗體?？梢酝ㄟ^(guò)把form元素的method屬性設(shè)置為dialog來(lái)把其合并到dialog元素中。這樣這個(gè)form表單提交的時(shí)候，這個(gè)對(duì)話框就會(huì)關(guān)閉同時(shí)把提交按鈕返回的值設(shè)置為retureValue。

同時(shí)details和summary也是值得推薦的新增元素。details展示給用戶在這個(gè)組件上可以獲取額外的信息或者控件。summary元素作為總結(jié)，標(biāo)題，或是圖例放在details的內(nèi)容中，二者互相配合。目前有Chrome，F(xiàn)irefox(版本49+)，Opera，Safari支持了details元素。無(wú)限互聯(lián)Web培訓(xùn)專(zhuān)家認(rèn)為這兩個(gè)元素未來(lái)會(huì)在折疊/展開(kāi)組件上起很大作用。

HTML5.1其他新增

除了這些元素，HTML5.1還添加了如下新增：

input元素的type屬性新增了month和week兩個(gè)值。正如它們名字所表示的那樣，它們定義控件將元素的值設(shè)置為代表一個(gè)月或者一周的字符串。

forceSpellcheck()方法加入到HTMLElement接口中，并且允許開(kāi)發(fā)者通過(guò)在元素上調(diào)用此函數(shù)強(qiáng)制用戶執(zhí)行拼寫(xiě)和語(yǔ)法檢查，即使用戶沒(méi)有聚焦這個(gè)單詞。其中一個(gè)用途就是inputElement.forceSpellcheck()。不幸的是還沒(méi)有瀏覽器支持這個(gè)特性。

allowfullscreen是iframe元素的一個(gè)布爾類(lèi)型屬性，它指定了當(dāng)調(diào)用requestFullScreen()方法時(shí)，iframe是否接受全屏。當(dāng)該屬性未被指定時(shí)，默認(rèn)元素不接受全屏模式。

reportValidity()方法被調(diào)用時(shí)，強(qiáng)制用戶進(jìn)行form元素的約束校驗(yàn)。比如當(dāng)一個(gè)必填元素沒(méi)有被填寫(xiě)或者一個(gè)字段涉及到它的pattern屬性時(shí)。如果約束的校驗(yàn)返回正確的結(jié)果時(shí)，這個(gè)函數(shù)會(huì)返回true，反之則返回false。目前有Chrome和Opera支持了這個(gè)方法。

未定案的特性

HTML5.1規(guī)范中也描述了一些當(dāng)前被認(rèn)為"atrisk"的特性。

無(wú)限互聯(lián)Web培訓(xùn)專(zhuān)家要提的第一個(gè)未定案的特性就是menu元素。它代表了菜單指令的集合，它原本是被設(shè)計(jì)用來(lái)創(chuàng)建工具欄和彈出菜單的。當(dāng)下Chrome和Opeara只有在實(shí)驗(yàn)性網(wǎng)絡(luò)平臺(tái)(Experimental

WebPlatformfeatures)打開(kāi)后才能支持，并且只支持contextmenu，不支持button

menu。Firefox的近期版本也是同樣，目前的其他瀏覽器沒(méi)有可以支持的。

接下來(lái)要介紹的特性是menuitem元素，定義了用戶可以從彈出菜單中調(diào)用的命令。在變種包含了context

menu，同時(shí)menu可能關(guān)聯(lián)了一個(gè)menubutton。當(dāng)下Chrome和Opeara只有在實(shí)驗(yàn)性網(wǎng)絡(luò)平臺(tái)(ExperimentalWeb

Platform

features)打開(kāi)后才能支持，并且只支持type=mand"。在Firefox中也只有當(dāng)關(guān)閉tag后才能支持帶有contextmenu屬性的menu。IE和Edge都沒(méi)有支持該元素。

另一個(gè)未定案的特性則是keygen。這個(gè)元素會(huì)在控件的表單提交的時(shí)候生成一對(duì)密鑰，私有密鑰會(huì)存儲(chǔ)在本地的keystore中，公有密鑰則會(huì)被打包發(fā)送到服務(wù)器。

Inadditiontotheseelements,thefollowingfeaturesarealso

consideredatrisk:除了上面提到的這些元素，下面這些特性也同樣沒(méi)有確定：

input元素的type的datatime和datatime-local兩個(gè)值。前者用來(lái)定義一個(gè)特定地區(qū)的日期和時(shí)間，候著則是代表本地日期和時(shí)間，沒(méi)有時(shí)區(qū)偏移量信息。

context屬性為div指定了一個(gè)contextmenu，并且當(dāng)用戶右鍵點(diǎn)擊div時(shí)會(huì)顯示菜單。所有的瀏覽器中，只有Firefox支持了這個(gè)屬性。

inputmode屬性。它指定了當(dāng)用戶在表格控件中輸入內(nèi)容時(shí)，輸入機(jī)制會(huì)提供更多的幫助。

好了，現(xiàn)在你已經(jīng)知道了HTML5.1做了哪些改變，可以進(jìn)一步了解工作組現(xiàn)在在研究的規(guī)范內(nèi)容了。

3、HTML5.2會(huì)帶來(lái)什么

HTML5.2規(guī)范的制定工作才剛剛開(kāi)始，所以此時(shí)此刻還沒(méi)辦法猜測(cè)出很多東西。

最重要的特性之一就是scripttype="module"和對(duì)于模塊如何分解、獲取和評(píng)估，這也是制定HTML

5.2將要討論的一部分。這個(gè)特性加入了對(duì)于加載JavaScript模塊的支持，以及分解、獲娶解析、評(píng)估模塊所必須的依賴(lài)。關(guān)于這個(gè)話題想了解更多的話，可以閱讀WHATWG的為Web平臺(tái)添加JavaScript模塊這篇文章。

另一個(gè)開(kāi)發(fā)中的特性就是關(guān)于meta

name="theme-color"的定義。它的值可以是包括HEX和RGB在內(nèi)的任何你在CSS中使用的顏色。一旦頁(yè)面中如此使用了，只要瀏覽器和操作系統(tǒng)定制了用戶界面，這個(gè)新的meta標(biāo)簽就會(huì)建議它們使用這個(gè)顏色。你可以看到Android端的Chrome瀏覽器已經(jīng)像下圖這樣做出這樣的行為。

對(duì)于autocapitalize屬性的標(biāo)準(zhǔn)化也在討論中。當(dāng)前Safari在IOS上對(duì)它的支持由于版本的不同有兩種不同的實(shí)現(xiàn)。老版本(IOS5之前)是作為布爾型屬性，而新版本則支持不同的值。已經(jīng)有提案發(fā)布建議以一種獨(dú)特的方式讓所有瀏覽器支持這個(gè)屬性。

最后無(wú)限互聯(lián)Web培訓(xùn)專(zhuān)家想提一下這個(gè)關(guān)于大綱算法概念的discussion。輪廓算法是一種基于節(jié)段元素的結(jié)構(gòu)而不是標(biāo)題的level來(lái)提供Web頁(yè)面大綱的機(jī)制。理論上，你可以在一個(gè)頁(yè)面中所有的標(biāo)題都使用h1，只要把標(biāo)題放置于正確的節(jié)段元素中，就可以創(chuàng)建出結(jié)構(gòu)化文檔。然而實(shí)際上還沒(méi)有任何代理實(shí)現(xiàn)了它，因此在網(wǎng)站中依賴(lài)這個(gè)算法是非常危險(xiǎn)的。

除了開(kāi)發(fā)新的特性之外，工作組同樣致力于使瀏覽器實(shí)現(xiàn)已存在的特性。其中之一就是input元素與一個(gè)datalist元素關(guān)聯(lián)時(shí)的行為。

如果你想了解關(guān)于Web培訓(xùn)課程的其他細(xì)節(jié)，可以關(guān)注這個(gè)無(wú)限互聯(lián)Web前端培訓(xùn)官網(wǎng)：web.wuxianedu/

4、總結(jié)

無(wú)限互聯(lián)Web培訓(xùn)專(zhuān)家把HTML近些年的重大改變完整的呈現(xiàn)給你了。以上內(nèi)容也說(shuō)明了開(kāi)發(fā)者想要緊隨Web的發(fā)展是多么的不容易。

關(guān)鍵詞標(biāo)簽：Web培訓(xùn),Web前端培訓(xùn),Web培訓(xùn)學(xué)院,Web培訓(xùn)課程

請(qǐng)聯(lián)系網(wǎng)站客服，了解詳細(xì)的優(yōu)惠課程信息~

優(yōu)質(zhì)、權(quán)威、便捷、省心