HTML5新版本新增哪些標(biāo)簽

　　今天扣丁學(xué)堂小編給大家總結(jié)一下關(guān)于HTML5新增標(biāo)簽詳解，首先HTML5是html的最新版本，是14年由w3c完成標(biāo)準(zhǔn)制定。增強(qiáng)了，瀏覽器的原生功能，減少瀏覽器插件(eg：flash)的應(yīng)用，提高用戶體驗(yàn)滿意度，讓開(kāi)發(fā)更加方便。

　　HTML5新增的標(biāo)簽

　　video表示一段視頻并提供播放的用戶界面

　　audio表示音頻

　　canvas表示位圖區(qū)域

　　source為video和audio提供數(shù)據(jù)源

　　track為video和audio指定字母

　　svg定義矢量圖

　　code代碼段

　　figure和文檔有關(guān)的圖例

　　figcaption圖例的說(shuō)明

　　main

　　time日期和時(shí)間值

　　mark高亮的引用文字

　　datalist提供給其他控件的預(yù)定義選項(xiàng)

　　keygen秘鑰對(duì)生成器控件

　　output計(jì)算值

　　progress進(jìn)度條

　　menu菜單

　　embed嵌入的外部資源

　　menuitem用戶可點(diǎn)擊的菜單項(xiàng)

　　menu菜單

　　template

　　section

　　nav

　　aside

　　article

　　footer

　　header

　　1、HTML5簡(jiǎn)介：(HTML5是目前-2017年來(lái)說(shuō)，是最新的一代HTML標(biāo)準(zhǔn))

　　2、HTML5一些新的規(guī)則：

　　新特性應(yīng)該基于HTML、CSS、DOM以及JavaScript。

　　減少對(duì)外部插件的需求(比如Flash)

　　更優(yōu)秀的錯(cuò)誤處理

　　更多取代腳本的標(biāo)記(新增了一些語(yǔ)義化的標(biāo)簽：在HTML4當(dāng)中，很明顯的一個(gè)形象就是用DIV來(lái)進(jìn)行任何的布局。)

　　HTML5應(yīng)該獨(dú)立于設(shè)備(對(duì)于各個(gè)移動(dòng)設(shè)備說(shuō)來(lái)，也是完美兼容的)

　　開(kāi)發(fā)進(jìn)程應(yīng)對(duì)公眾透明。

　　3、新特性：

　　HTML5中的一些有趣的新特性：

　　新的特殊內(nèi)容元素，比如article、footer、header、nav、section

　　新的表單控件，比如calendar、date、time、email、url、search

　　用于媒介回放的video和audio元素

　　用于繪畫的canvas元素

　　對(duì)本地離線存儲(chǔ)的更好的支持(我們講JS的時(shí)候，會(huì)講到技能點(diǎn))

　　4、兼容性情況：針對(duì)瀏覽器的支持(除了IE6/IE7/IE8/IE9以為，其他的大部分主流的瀏覽器都是完美兼容的)

　　5、HTML5新增標(biāo)簽(常用的)

　　如何去理解標(biāo)簽：

　　(1)基本語(yǔ)境(語(yǔ)義化)，用在場(chǎng)景是什么?

　　(2)默認(rèn)樣式、是否塊/行內(nèi)元素、是否是閉合元素。

　　header頁(yè)眉(網(wǎng)頁(yè)(部分區(qū)域)的頭部頂部導(dǎo)航區(qū)域等等)，閉合標(biāo)簽;塊元素;默認(rèn)的寬是：100%;高：內(nèi)容的高度;實(shí)質(zhì)上，跟DIV標(biāo)簽，可以說(shuō)是完全一樣的特性;

　　nav導(dǎo)航鏈接部分;閉合標(biāo)簽;塊元素;默認(rèn)的寬是：100%;高：內(nèi)容的高度;實(shí)質(zhì)上，跟DIV標(biāo)簽，可以說(shuō)是完全一樣的特性。

　　section標(biāo)簽定義網(wǎng)頁(yè)中的區(qū)域(部分)。比如章節(jié)、頁(yè)眉、頁(yè)腳或文檔中的其他部分。閉合標(biāo)簽;塊元素;默認(rèn)的寬是：100%;高：內(nèi)容的高度;實(shí)質(zhì)上，跟DIV標(biāo)簽，可以說(shuō)是完全一樣的特性;

　　footer頁(yè)腳(網(wǎng)頁(yè)(部分區(qū)域)的底部|版權(quán)區(qū)域等等)，閉合標(biāo)簽;塊元素;默認(rèn)的寬是：100%;高：內(nèi)容的高度;實(shí)質(zhì)上，跟DIV標(biāo)簽，可以說(shuō)是完全一樣的特性;

　　article內(nèi)容是引用其他地方的。一個(gè)區(qū)域中的，另外一部分內(nèi)容;閉合標(biāo)簽;塊元素;默認(rèn)的寬是：100%;高：內(nèi)容的高度;實(shí)質(zhì)上，跟DIV標(biāo)簽，可以說(shuō)是完全一樣的特性

　　aside跟article是一起使用;是輔助article區(qū)域的內(nèi)容。也可以理解為整個(gè)網(wǎng)頁(yè)的輔助區(qū)域;(最常見(jiàn)的京東的右側(cè)的工具欄)

　　hgroup給標(biāo)題分組，為標(biāo)題或者子標(biāo)題進(jìn)行分組，通常與h1-h6元素組合使用。如果文章中只有一個(gè)標(biāo)題，則不使用hgroup。

　　閉合標(biāo)簽;塊元素;默認(rèn)的寬是：100%;高：內(nèi)容的高度;實(shí)質(zhì)上，跟DIV標(biāo)簽，可以說(shuō)是完全一樣的特性;

　　figure對(duì)多個(gè)元素進(jìn)行組合。通常與figcaption聯(lián)合使用。閉合標(biāo)簽;塊元素;默認(rèn)的寬是：100%;高：內(nèi)容的高度;實(shí)質(zhì)上跟DIV標(biāo)簽，可以說(shuō)是完全一樣的特性;figcaption定義figure元素組的標(biāo)題，必須寫在figure元素中。一個(gè)figure元素內(nèi)最多只允許放置一個(gè)figcaption元素。閉合標(biāo)簽;塊元素;默認(rèn)的寬是：100%;高：內(nèi)容的高度;實(shí)質(zhì)上，跟DIV標(biāo)簽，可以說(shuō)是完全一樣的特性;

　　audio播放聲音文件，比如音樂(lè)或其它音頻流?？梢栽陂_(kāi)始標(biāo)簽和結(jié)束標(biāo)簽之間放置文本內(nèi)容，這樣老的瀏覽器就可以顯示出不支持該標(biāo)簽的信息。閉合標(biāo)簽;行內(nèi)元素;默認(rèn)的寬:controls的寬度300px;高:controls的高度32px;autoplayautoplay如果出現(xiàn)該屬性，則音頻在就緒后馬上播放。controlscontrols如果出現(xiàn)該屬性，則向用戶顯示控件，比如播放按鈕。preloadpreload如果出現(xiàn)該屬性，則音頻在頁(yè)面加載時(shí)進(jìn)行加載，并預(yù)備播放。如果使用“autoplay”，則忽略該屬性。srcurl要播放的音頻的URL。

　　video播放視頻文件，比如電影或其它視頻流?？梢栽陂_(kāi)始標(biāo)簽和結(jié)束標(biāo)簽之間放置文本內(nèi)容，這樣老的瀏覽器就可以顯示出不支持該標(biāo)簽的信息。閉合標(biāo)簽;行內(nèi)元素;默認(rèn)的寬：300px高：150px。autoplayautoplay如果出現(xiàn)該屬性，則視頻在就緒后馬上播放。controlscontrols如果出現(xiàn)該屬性，則向用戶顯示控件，比如播放按鈕。height設(shè)置視頻播放器的高度。looploop如果出現(xiàn)該屬性，則當(dāng)媒介文件完成播放后再次開(kāi)始播放。preloadpreload如果出現(xiàn)該屬性，則視頻在頁(yè)面加載時(shí)進(jìn)行加載，并預(yù)備播放。如果使用“autoplay”，則忽略該屬性。src要播放的視頻的URL。width設(shè)置視頻播放器的寬度。

　　source為媒介元素(比如video和audio)指定多個(gè)播放格式與編碼，瀏覽器會(huì)自動(dòng)選擇第一個(gè)可以識(shí)別的格式。非閉合標(biāo)簽，只有開(kāi)始標(biāo)簽，沒(méi)有結(jié)束標(biāo)簽。source行內(nèi)元素，默認(rèn)無(wú)寬度和高度。media定義媒介資源的類型，供瀏覽器決定是否下載。src媒介的URL。type定義播放器在音頻流中的什么位置開(kāi)始播放。默認(rèn)，音頻從開(kāi)頭播放。

　　canvas定義圖形，比如圖表和其他圖像。

　　閉合標(biāo)簽;行內(nèi)元素;默認(rèn)情況下，canvas創(chuàng)建的畫布寬：300px;高：150px;

　　datalist定義可選數(shù)據(jù)的列表。與input元素配合使用，就可以制作出輸入值的下拉列表。

　　閉合標(biāo)簽;行內(nèi)元素;默認(rèn)無(wú)寬度和高度。

　　embed定義嵌入的內(nèi)容，比如插件。用來(lái)插入各種多媒體，格式可以是MIDI、MP3等。

　　非閉合標(biāo)簽，只有開(kāi)始標(biāo)簽，沒(méi)有結(jié)束標(biāo)簽。行內(nèi)元素;默認(rèn)的寬：300px;高：150px。

　　time定義日期或時(shí)間，或者兩者。閉合標(biāo)簽;行內(nèi)元素，默認(rèn)情況下，寬：內(nèi)容的寬度;高：內(nèi)容的高度;

　　address為文檔或section定義聯(lián)系信息，比如：電子郵箱、地址、電話、QQ、微信號(hào)等。

　　閉合標(biāo)簽;塊元素;默認(rèn)的寬是：100%;高：內(nèi)容的高度;實(shí)質(zhì)上，跟DIV標(biāo)簽，可以說(shuō)是完全一樣的特性;

　　map定義客戶端的圖像映射。圖像映射是帶有可點(diǎn)擊區(qū)域的圖像。

　　閉合標(biāo)簽;行內(nèi)元素;默認(rèn)情況下，無(wú)寬度和高度;

　　areaarea元素永遠(yuǎn)嵌套在map元素內(nèi)部。area元素可定義圖像映射中的區(qū)域。

　　閉合標(biāo)簽，行內(nèi)元素;只有結(jié)束標(biāo)簽，沒(méi)有開(kāi)始標(biāo)簽。默認(rèn)情況下，無(wú)寬度和高度;

　　mark定義頁(yè)面中需要突出顯示或高亮顯示的內(nèi)容，通常在引用原文時(shí)，使用此元素，目的就是引起當(dāng)前用戶的注意。閉合標(biāo)簽;行內(nèi)元素;默認(rèn)情況下，寬：內(nèi)容的寬度;高：內(nèi)容的高度;

　　details標(biāo)簽定義元素的細(xì)節(jié)，用戶可進(jìn)行查看，或通過(guò)點(diǎn)擊進(jìn)行隱藏。(備注信息)，塊元素

　　;默認(rèn)的寬是：100%;高：內(nèi)容的高度;實(shí)質(zhì)上，跟DIV標(biāo)簽，可以說(shuō)是完全一樣的特性;

　　但是有一個(gè)動(dòng)態(tài)的效果，點(diǎn)擊可以顯示(展開(kāi))內(nèi)容，再點(diǎn)擊可以隱藏(收起)內(nèi)容;

　　以上就是關(guān)于HTML5新增標(biāo)簽的詳細(xì)介紹，最后想要工作不累就要不斷的提升自己的技能，想要快速學(xué)習(xí)HTML5培訓(xùn)技術(shù)就到由專業(yè)老師授課的扣丁學(xué)堂學(xué)習(xí)吧?？鄱W(xué)堂還有名師錄制的HTML5視頻教程供學(xué)員觀看學(xué)習(xí)，想要HTML5視頻教程的小伙伴快咨詢我們的專業(yè)老師索要吧?？鄱W(xué)堂H5技術(shù)交流群：751662650。