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

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

　　HTML5新增的標(biāo)簽

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

　　audio表示音頻

　　canvas表示位圖區(qū)域

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

　　track為video和audio指定字母

　　svg定義矢量圖

　　code代碼段

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

　　figcaption圖例的說明

　　main

　　time日期和時間值

　　mark高亮的引用文字

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

　　keygen秘鑰對生成器控件

　　output計算值

　　progress進度條

　　menu菜單

　　embed嵌入的外部資源

　　menuitem用戶可點擊的菜單項

　　menu菜單

　　template

　　section

　　nav

　　aside

　　article

　　footer

　　header

　　1、HTML5簡介：(HTML5是目前-2017年來說，是最新的一代HTML標(biāo)準)

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

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

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

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

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

　　HTML5應(yīng)該獨立于設(shè)備(對于各個移動設(shè)備說來，也是完美兼容的)

　　開發(fā)進程應(yīng)對公眾透明。

　　3、新特性：

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

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

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

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

　　用于繪畫的canvas元素

　　對本地離線存儲的更好的支持(我們講JS的時候，會講到技能點)

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

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

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

　　(1)基本語境(語義化)，用在場景是什么?

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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