一、首先我們來說說html5 header標籤元素基本介紹
header元素是一種具有引導和導航作用的結構元素，通常用來放置整個頁面或頁面內的一個內容區塊的標題，但也可以包含其他的內容，比如在header裡面放置logo圖片、搜尋表單等等。
注意：一個頁面內並沒有限制header的出現次數，也就是說我們可以在同一頁面內，不同的內容區塊上分別加上一個header元素。
在HTML5版本之前習慣使用div標籤布局網頁，在HTML5在DIV標籤基礎上新增header標籤元素。也叫“<header>”頭部標籤。以前我們在div css布局中常常把網頁大致分為頭部、內容、底部。對於大結構我們常常使用div裡加id進行布局。而頭部常常使用<div id=”header”></div>或<div class=”header”></div>進行布局，特點與傳統DIV布局不同，少了div做標籤，而是新增元素標籤。
正應為大家公認html布局中對“header”為常用命名，所以在HTML5新增了個header標籤元素。可以這樣理解為什麼在html5中新增header為標籤元素。
除了直接使用header標籤外，也可以對header設定class或id。
html5 header標籤的用法執行個體：
對首頁的介紹：
<header> <h1>topic.alibabacloud.com</h1> <p>專註於編程（topic.alibabacloud.com）</p> </header> <article> <header> <h1>topic.alibabacloud.com的html5語義化標籤之結構標籤</h1> <p>article、section、hgroup、aside、nav...</p> </header> <p>...這裡麵包含了很多東西...</p> </article>
代碼效果
這就是最基本的用法了。在上面的結構中，我們可以看到使用header我們定義了一篇文章的標題和內容。這裡header標籤的使用並不是頁面的頁頭，而是文章的頁頭。
所以在HTML5中，header的使用更加靈活，你可以根據你的需要來定義和組織document結構。
同樣,在架構頁面時，header標籤一般都放在頁面的頂部，但是如果你想把他放在左側，右側甚至底部都沒有關係，標籤只定義了本身在頁面的角色，而不是位置。當然更具搜尋引擎最佳化原則，重要內容最後在架構頁面的時候提前。
二、現在再來說說相容性的問題了：
因為header標籤是HTML5新增標籤元素，所以舊版本瀏覽器均不支援，需要IE9+以上瀏覽器、最新GoogleChrome等瀏覽器才支援。當然國內360瀏覽器、百度瀏覽器、遨遊瀏覽器等瀏覽器均借用系統內建IE核心，所以國內瀏覽器實際上與你系統內建瀏覽器IE版本相同，所以你IE瀏覽器在IE9或以上版本自然就相容HTML5新增標籤元素。
現在我們升級一下上文的代碼：
<body><header><hgroup><h1>HTML5教程php中文網</h1><a href=”/”>[手機版]</a><a href=”/”>[topic.alibabacloud.com]</a></hgroup><nav><ul><li><a href=”/”>首頁</a></li><li><a href=”/”>手機版</a></li><li><a href=”/”>論壇</a></li></ul></nav></header></body>
效果
以上就是關於HTML5 header標籤的用法介紹，本篇文章就介紹這麼多了，想看更多的，歡迎來topic.alibabacloud.com，有問題在下方留言。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
