本篇文章主要的向大家介紹了關於html5 header標籤的元素的基本介紹，和header標籤的用法實例解析。下面就讓我們一起來看看這篇關於html5 header標籤的文章吧

一、首先我們來說說html5 header標籤元素基本介紹

header元素是一種具有引導和導航作用的結構元素，通常用來放置整個頁面或頁面內的一個內容區塊的標題，但也可以包含其他的內容，例如在header裡面放置logo圖片、搜尋表單等等。

注意：一個頁面內並沒有限制header的出現次數，也就是說我們可以在同一頁內，不同的內容區塊上分別加上一個header元素。

在HTML5版本之前習慣使用div標籤版面網頁，並在HTML5在DIV標籤基礎上新增header標籤元素。也叫「

正應為大家公認html版面配置中對「header」為常用命名，所以在HTML5新增了個header標籤元素。可以這樣理解為什麼在html5中新增header為標籤元素。

除了直接使用header標籤外，也可以對header設定class或id。

html5 header標籤的用法實例：

#對主頁的介紹：

 
PHP中文网
 
专注于编程（PHP中文网）
 
 
 
 
PHP中文网的html5语义化标签之结构标签
 
article、section、hgroup、aside、nav...
 
 
...这里面包含了很多东西...
 

程式碼效果如圖：

這就是最基本的用法了。在上面的結構中，我們可以看到使用header我們定義了一篇文章的標題和內容。這裡header標籤的使用並不是頁面的頁頭，而是文章的頁頭。

所以在HTML5中，header的使用更加靈活，你可以根據你的需求來定義和組織document結構。

同樣,在架構頁面時，header標籤一般都放在頁面的頂部，但是如果你想把他放在左側，右側甚至底部都沒有關係，標籤只定義了本身在頁面的角色，而不是位置。當然更具搜尋引擎優化原則，重要內容最後在架構頁面的時候提早。

二、現在再來說相容性的問題了：

因為header標籤是HTML5新增標籤元素，所以舊版瀏覽器皆不支持，需要IE9 以上瀏覽器、最新谷歌Chrome等瀏覽器才支援。當然國內360瀏覽器、百度瀏覽器、遨遊瀏覽器等瀏覽器均借用系統自帶IE內核，所以國內瀏覽器實際上與你係統自帶瀏覽器IE版本相同，所以你IE瀏覽器在IE9或以上版本自然相容於HTML5新增標籤元素。

現在我們升級上文的程式碼：

 
 
 
HTML5教程php中文网
 [手机版] [PHP中文网] 
  
 

效果如圖：

以上就是關於HTML5 header標籤的用法介紹，這篇文章就介紹這麼多了，想看更多的，歡迎來PHP中文網，有問題在下方留言。

【小編推薦】

關於html5中的section標籤與div標籤的差異（內有實例）

html article標籤有什麼用？ html article標籤的使用方法介紹

以上是html5 header標籤是什麼意思？ html5 header標籤的用法詳解（附實例）的詳細內容。更多資訊請關注PHP中文網其他相關文章！