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

　　HTML5新增的標簽

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

　　audio表示音頻

　　canvas表示位圖區域

　　source為video和audio提供數據源

　　track為video和audio指定字母

　　svg定義矢量圖

　　code代碼段

　　figure和文檔有關的圖例

　　figcaption圖例的說明

　　main

　　time日期和時間值

　　mark高亮的引用文字

　　datalist提供給其他控件的預定義選項

　　keygen秘鑰對生成器控件

　　output計算值

　　progress進度條

　　menu菜單

　　embed嵌入的外部資源

　　menuitem用戶可點擊的菜單項

　　menu菜單

　　template

　　section

　　nav

　　aside

　　article

　　footer

　　header

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

　　2、HTML5一些新的規則：

　　新特性應該基于HTML、CSS、DOM以及JavaScript。

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

　　更優秀的錯誤處理

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

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

　　開發進程應對公眾透明。

　　3、新特性：

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

　　新的特殊內容元素，比如article、footer、header、nav、section

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

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

　　用于繪畫的canvas元素

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

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

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

　　如何去理解標簽：

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

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

　　header頁眉(網頁(部分區域)的頭部頂部導航區域等等)，閉合標簽;塊元素;默認的寬是：100%;高：內容的高度;實質上，跟DIV標簽，可以說是完全一樣的特性;

　　nav導航鏈接部分;閉合標簽;塊元素;默認的寬是：100%;高：內容的高度;實質上，跟DIV標簽，可以說是完全一樣的特性。

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

　　footer頁腳(網頁(部分區域)的底部|版權區域等等)，閉合標簽;塊元素;默認的寬是：100%;高：內容的高度;實質上，跟DIV標簽，可以說是完全一樣的特性;

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

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

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

　　閉合標簽;塊元素;默認的寬是：100%;高：內容的高度;實質上，跟DIV標簽，可以說是完全一樣的特性;

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

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

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

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

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

　　閉合標簽;行內元素;默認情況下，canvas創建的畫布寬：300px;高：150px;

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

　　閉合標簽;行內元素;默認無寬度和高度。

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

　　非閉合標簽，只有開始標簽，沒有結束標簽。行內元素;默認的寬：300px;高：150px。

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

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

　　閉合標簽;塊元素;默認的寬是：100%;高：內容的高度;實質上，跟DIV標簽，可以說是完全一樣的特性;

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

　　閉合標簽;行內元素;默認情況下，無寬度和高度;

　　areaarea元素永遠嵌套在map元素內部。area元素可定義圖像映射中的區域。

　　閉合標簽，行內元素;只有結束標簽，沒有開始標簽。默認情況下，無寬度和高度;

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

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

　　;默認的寬是：100%;高：內容的高度;實質上，跟DIV標簽，可以說是完全一樣的特性;

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

　　以上就是關于HTML5新增標簽的詳細介紹，最后想要工作不累就要不斷的提升自己的技能，想要快速學習HTML5培訓技術就到由專業老師授課的扣丁學堂學習吧。扣丁學堂還有名師錄制的HTML5視頻教程供學員觀看學習，想要HTML5視頻教程的小伙伴快咨詢我們的專業老師索要吧。扣丁學堂H5技術交流群：751662650。