HTML5語義化標籤

在HTML5中最基礎也是比較好理解的也就是語義化標籤了，，顧名思義語義化也就是能夠直接讀懂的標籤~，這樣咱們在項目開發過程當中不但本身不會由於5花8門的標籤命名而傷腦筋，跟同事對接項目也會節約不少時間~~  誰不想簡單輕鬆一些呢。。。

語義化標籤有2種，一種是單純語義化的，無功能，二種是語義化，且有功能的。

一：無功能，語義化標籤

1.1 - <header></header>

SM:也就是咱們的頭部標籤， 通常用於網站頭部內容

1.2  <footer></footer>

SM:有頭部確定就有底部，通常用於網站底部（趕腳好廢話呀~~）。

1.3 <nav></nav>

SM:導航標籤，這個也比較好理解，平時咱們用UL標籤寫導航的時候，UL裏面必定是要包含li標籤標籤的，這樣會有必定的侷限性，<nav></nav>標籤就不侷限裏面所房標籤，能夠是一羣的a標籤，也能夠是一個a，一個p，你喜歡就好！

?

1 2 3 4 5 6

< nav > 　　< a href="">導航1</ a > 　　< a href="">導航2</ a > 　　< a href="">導航3</ a > 　　< a href="">導航4</ a > </ nav >

1.4 <hgroup></hgroup>

SM:標題組合，通常爲頁面的主要標題加描述

<hgroup>
　　<h2>我是標題</h2>
　　<h3>我是標題描述</h3>
</hgroup>

1.5 <section></section>

SM:一個板塊或者一個區域內容，用於劃分頁面不一樣區域

1.6 <article></article>

SM:用來在頁面中表示一套結構完整且獨立的內容部分

1.6.1 <aslde></aside>

SM:主題的附屬信息(用途很廣，主要就是一個附屬內容)，若是article裏面爲一篇文章的話，那麼文章的做者以及信息內容就是這篇文章的附屬內容了

1.7 <figure></figure>

SM:媒體元素，好比一些視頻，圖片啊等等

?

1 2 3 4

< figure > 　　< img  /> //圖片 　　< figcaption >我是圖片的說明描述</ figcaption > //圖片說明 </ figure >

1.8 <time></time>

SM:專門爲時間而出的標籤，以往咱們時間標籤不少，好比span,i,b等等  time標籤有個屬性datetime="" //沒實際功能，便於查找

二：有功能，語義化標籤

2.1 <datalist></datalist>

SM:選項列表，與input元素配合使用，來定義input可能的值

?

1 2 3 4 5 6

< input type="text" list="valList">  //要在input標籤中添加一個新的list屬性，屬性值爲datalist的ID~ 　　< datalist id="valList"> 　　< option value="javascript">javascript</ option > 　　< option value="html">html</ option > 　　< option value="css">css</ option > </ datalist >

　

當我在輸入框中輸入一個j的時候，裏面相關的javascript就會顯示出來~~

2.2 <details></details>

SM:用於描述文檔或者文檔某個部分的細節~ 默認屬性爲open~

ps:配合summary一塊兒使用

?

1 2 3 4

< details > 　　< summary >芝麻開門</ summary > 　　< p >BOOM!!!!!!!!!!!!</ p > </ details >

　  //沒有點擊時候的頁面顯示

//點擊以後的內容顯示

2.3 <progress></progress>

SM:用於製做進度條，裏面有2個屬性，1：max 總的進度 2：value 如今的進度

?

1 2 3

< progress max="200" value="100">  // max:總共爲200，當前爲100，就是說進度條只到的50% 　　< span >20</ span >%  //用於兼容不支持此屬性的瀏覽器 </ progress >

　

　三：關於兼容

毫無疑問，H5標籤確定是有兼容問題的， 低版本的IE是不認識這些語義化標籤的，通常有2種辦法能夠解決這個問題

NO.1

本身寫javascript代碼， 由於IE不認識這些標籤，因此咱們只須要在js中建立這些標籤就好

?

1 2 3

<script type= "text/javascript" >      document.createElement( 'header' );  //建立一個header元素 </script>

這樣咱們就建立出來了一個header頭部元素，如今咱們就能夠HTML和樣式中寫入這個標籤

ps:由於建立出來的標籤是沒有任何默認屬性的，因此咱們要給建立出來的標籤建立一個CSS屬性display：block ;

NO.2

直接在外部引入一個js文件，引入方法跟咱們平時引入插件的方式同樣（這裏就再也不闡述）。。。。

 

 

來自<http://www.cnblogs.com/htzan/p/4516057.html>