首頁 >web前端 >H5教程 >HTML5中的header標籤是什麼意思? HTML5中header標籤具體使用方法你知道嗎?

HTML5中的header標籤是什麼意思? HTML5中header標籤具體使用方法你知道嗎?

寻∝梦
寻∝梦原創
2018-08-15 17:48:288972瀏覽

HTML5中的header標籤是什麼意思? HTML5中header標籤具體使用方法你知道嗎?這篇文章主要帶大家詳細的介紹下HTML5的頭部標籤1aa9e5d373740b65a0cc8f0a02150c53,解釋了使用方法和使用說明

對首頁的介紹:

<header>
<h1>Welcome to my homepage</h1>
<p>My name is Donald Duck</p>
</header>
<p>The rest of my home page...</p>

HTML中header標籤的定義與用法:

1aa9e5d373740b65a0cc8f0a02150c53 標籤定義文件的頁首(介紹資訊)。

HTML 1aa9e5d373740b65a0cc8f0a02150c53 元素用來表示一些前言性質或導航類別的內容。它可以包含一些標題性質元素,也可以放置一些例如logo,搜尋框,或其它的1aa9e5d373740b65a0cc8f0a02150c53元素等。

使用說明:

1aa9e5d373740b65a0cc8f0a02150c53元素並不是可以形成段落內容的元素,所以,不需要在內容目錄中體現出來。

用法範例:

<header>
  a logo
</header>

HTML 4.01 與 HTML 5 之間的差異

1aa9e5d373740b65a0cc8f0a02150c53 標籤是 HTML 5 中的新標籤。

1aa9e5d373740b65a0cc8f0a02150c53:描述了文件的頭部區域,於定義內容的介紹展示區域

header標籤不同於我們最熟悉的head標籤,header往往更常被用於定義文章的頭部,下面我們就來淺析HTML5中header標籤的用法:

1aa9e5d373740b65a0cc8f0a02150c53標籤定義文檔的頁眉,通常是一些引導和導航資訊。它不限於寫在網頁頭部,也可以寫在網頁內容裡面。

在新的標準中header標籤定義如下:

"A group of introductory or navigational aids.”

基本意思「一組介紹性的護著導航相關的輔助內容」。字面上理解header標籤不單單只是定義頁頭內容,也可以定義頁頭以下其它內容的介紹。這和我們傳統的頁面header定義並不完全一致。

通常1aa9e5d373740b65a0cc8f0a02150c53標籤至少包含(但不限於)一個標題標記(4a249f0d628e2318394fd9b75b4636b1-4e9ee319e0fa4abc21ff286eeb145ecc),也可以包含d8eccd9ed644b68a6460a2bb84548c82標籤,還可以包含表格內容、標誌、搜尋表單、c787b9a589a3ece771e842a6176cf8e9導航等。

<header>  
 <h1>PHP中文网</h1>  
 <p>专注于前端后台开发授课</p>  
</header>  
<article>  
 <header>  
  <h1>html5语义化标签之结构标签</h1>  
  <p>article、section、hgroup、aside、nav...</p>  
 </header>  
 <p>...这里面包含很多东西...</p>  
</article>

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

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

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

最後由於在HTML5中header屬於區塊元素,如果我們要在大多數主流瀏覽器使用的話最好定義CSS,如下。

header { display:block;}

想看關於footer頁尾標籤的請點這裡:HTML5中footer標籤的用法你知道嗎? ,HTML5中的footer標籤是什麼意思?

這篇文章把HTML5中header標籤講的很透徹,如果有其它疑問的話,可以在下面提問。

【相關推薦】

HTML IMG標籤的屬性是有哪些?了解IMG標籤的用法

HTML5中web是什麼? web儲存中的元素有哪些?

#

以上是HTML5中的header標籤是什麼意思? HTML5中header標籤具體使用方法你知道嗎?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn