21世紀，2016年6月，HTML

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

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

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

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

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

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

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

以下是本文的重點：

HTML5引入的語義元素概述;

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

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

1、HTML5新的語義元素

HTML5.1最偉大的創(chuàng)新之一就是引入了新的語義元素。它們也許(很有可能)會成為你如今日常寫碼的一部分。就是因為有了標記性的結(jié)構(gòu)和語義，才使我們的站點有了很大改善。

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

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

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

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

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

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

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

將兩個革命性的元素單獨拿出來說，它們幫助我們解決了Flash等技術(shù)難題：

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

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

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

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

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

這部分將主要介紹HTML

5.1中一些尚未確定的元素、方法和屬性。無限互聯(lián)Web培訓(xùn)專家將就其概念和優(yōu)點進行介紹，并且提供了一些其他資料，如果感興趣可以進行擴展閱讀。需要注意的是，這里提到的大部分新元素都在HTML5中被提出卻因為某些原因沒有通過提案，所以對你來說也許并不陌生。例如details和summary就是從HTML

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

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

開始使用新的元素吧~

HTML5.1引入的新元素

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

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

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

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

HTML5.1其他新增

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

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

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

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

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

未定案的特性

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

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

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

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

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

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

Platform

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

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

Inadditiontotheseelements,thefollowingfeaturesarealso

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

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

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

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

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

3、HTML5.2會帶來什么

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

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

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

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

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

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

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

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

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

4、總結(jié)

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

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

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

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