HTML5 之語義標籤

itwangchen發表於2019-03-22
HTML

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


相關文章