html5 header標籤是什麼意思？ html5 header標籤的用法詳解（附實例）-H5教程-PHP中文網

html5 header標籤是什麼意思？ html5 header標籤的用法詳解（附實例）

寻∝梦

發布： 2018-08-30 13:41:48

原創

6445 人瀏覽過

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

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

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

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

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

」頭部標籤。以前我們在div css版面中常常把網頁大致分為頭部、內容、底部。對於大結構我們常常使用div裡加id進行佈局。而頭部常使用或進行佈局，特點與傳統DIV佈局不同，少了div做標籤，而是新增元素標籤。

正應為大家公認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>

登入後複製

程式碼效果如圖：

html5 header標籤是什麼意思？ html5 header標籤的用法詳解（附實例）

這就是最基本的用法了。在上面的結構中，我們可以看到使用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標籤是什麼意思？ html5 header標籤的用法詳解（附實例）