本篇文章主要的向大家介紹了關於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標籤的用法實例：
#對主頁的介紹：
<header> <h1>PHP中文网</h1> <p>专注于编程（PHP中文网）</p> </header> <article> <header> <h1>PHP中文网的html5语义化标签之结构标签</h1> <p>article、section、hgroup、aside、nav...</p> </header> <p>...这里面包含了很多东西...</p> </article>
程式碼效果如圖：
這就是最基本的用法了。在上面的結構中，我們可以看到使用header我們定義了一篇文章的標題和內容。這裡header標籤的使用並不是頁面的頁頭，而是文章的頁頭。
所以在HTML5中，header的使用更加靈活，你可以根據你的需求來定義和組織document結構。
同樣,在架構頁面時，header標籤一般都放在頁面的頂部，但是如果你想把他放在左側，右側甚至底部都沒有關係，標籤只定義了本身在頁面的角色，而不是位置。當然更具搜尋引擎優化原則，重要內容最後在架構頁面的時候提早。
二、現在再來說相容性的問題了：
因為header標籤是HTML5新增標籤元素，所以舊版瀏覽器皆不支持，需要IE9 以上瀏覽器、最新谷歌Chrome等瀏覽器才支援。當然國內360瀏覽器、百度瀏覽器、遨遊瀏覽器等瀏覽器均借用系統自帶IE內核，所以國內瀏覽器實際上與你係統自帶瀏覽器IE版本相同，所以你IE瀏覽器在IE9或以上版本自然相容於HTML5新增標籤元素。
現在我們升級上文的程式碼：
<body> <header> <hgroup> <h1>HTML5教程php中文网</h1> <a href=”/”>[手机版]</a> <a href=”/”>[PHP中文网]</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標籤的用法介紹，這篇文章就介紹這麼多了，想看更多的，歡迎來PHP中文網，有問題在下方留言。
【小編推薦】
關於html5中的section標籤與div標籤的差異（內有實例）
html article標籤有什麼用？ html article標籤的使用方法介紹
以上是html5 header標籤是什麼意思？ html5 header標籤的用法詳解（附實例）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
