HTML5 之語義標籤

HTML5語義標籤

在HTML中一般使用Div標籤佈局，可是Div標籤自己沒有任何意義，並不能從標籤自己斷定當前區塊在網頁中的地位，因此在HTML5中新增了一些具備語義化的標籤。

<header></header>
表明網頁頭部或者文章頭部
在一個頁面內沒有限制header出現次數，能夠在不一樣的內容區塊上分別加header標籤
在header標籤中能夠至少包含一個標題標籤 也能夠包含logo或導航元素複製代碼

<footer></footer>
表明網頁底部或者文章底部複製代碼

<nav></nav>
表明網頁導航，並非全部的導航都要被放進nav標籤中，只須要將主要的放入便可。
應用場景：傳統導航條、側邊欄導航、翻頁操做。 複製代碼

<article></article>
表明頁面中獨立完整的內容區域。它能夠是博客中的文章、帖子、用戶的回覆，它能夠有本身獨立的標題、頁腳。複製代碼

<aside></aside>
表示當前頁面附屬信息部分，能夠包含側邊欄、廣告、以及其餘相似的有區別於主要內容的部分。複製代碼

<main></main>
表示網頁的主體內容，內容對於文檔來講應當是惟一的，它不該包含在網頁中重複出現的內容，好比側欄、導航欄、版權信息、站點標誌或搜索表單。main標籤在IE高版本中不識別，IE高版本又不識別IE條件註釋，因此須要單獨處理複製代碼

<figure>
    <figcaption></figcaption>
</figure>
用於定義圖片+標題或者圖片+標題+描述。複製代碼

兼容處理

1. 手動處理

   1. 經過JavaScript建立該元素

   2. 將建立的元素轉換爲塊級

2. 使用第三方庫 <script src="html5shiv.min.js"></script>

只有IE低版本不支持HTML5新增的標籤，非IE低版本沒有必要執行上述代碼，因此須要使用IE特有的條件註釋。

<!--[if lt IE 9]>
 　　<script src="js/html5shiv.min.js"></script>
<![endif]-->複製代碼

IE條件註釋

<!-- 只要IE瀏覽器可以識別IE條件註釋 其餘瀏覽器都會將此看成普通註釋 -->
<!--[if IE]> 全部的IE可識別 <![endif]-->
<!--[if IE 6]> 僅IE6可識別 <![endif]-->
<!--[if lte IE 6]> IE6以及IE6如下版本可識別 <![endif]-->
<!--[if gte IE 6]> IE6以及IE6以上版本可識別 <![endif]-->
<!--[if IE 7]> 僅IE7可識別 <![endif]-->
<!--[if lt IE 7]> IE7如下版本可識別 <![endif]-->
<!--[if gt IE 7]> IE7以上版本可識別 <![endif]-->
<!--[if IE 8]> 僅IE8可識別 <![endif]-->
<!--[if IE 9]> 僅IE9可識別 <![endif]-->複製代碼

生成IE條件註釋的快捷鍵 cc:ie + tab