明輝手游網(wǎng)中心：是一個免費提供流行視頻軟件教程、在線學習分享的學習平臺！

html header標簽與footer標簽區(qū)別的2點總結(jié)（附元素區(qū)別案例）

發(fā)表時間：2023-09-02 來源：明輝站整理相關(guān)軟件相關(guān)文章人氣：

[摘要]本篇文章主要的為大家講述的關(guān)于HTML header標簽和footer標簽的兩點區(qū)別，接下來就讓我們一起來看這篇關(guān)于HTML header標簽和footer標簽的文章吧一、我們先來看看<header>標簽和<footer>標簽的區(qū)別:<header>標簽定義文檔...
本篇文章主要的為大家講述的關(guān)于HTML header標簽和footer標簽的兩點區(qū)別，接下來就讓我們一起來看這篇關(guān)于HTML header標簽和footer標簽的文章吧

一、我們先來看看<header>標簽和<footer>標簽的區(qū)別:

<header>標簽定義文檔或者文檔的一部分區(qū)域的頁眉。

<header> 元素應該作為介紹內(nèi)容或者導航鏈接欄的容器。在一個文檔中，可以定義多個 <header> 元素。

注釋：<header> 標簽不能被放在 <footer>、<address> 或者另一個 <header> 元素內(nèi)部。

<footer> 標簽定義文檔或者文檔的一部分區(qū)域的頁腳。

<footer> 元素應該包含它所包含的元素的信息。

在典型情況下，該元素會包含文檔創(chuàng)作者的姓名、文檔的版權(quán)信息、使用條款的鏈接、聯(lián)系信息等等。

在一個文檔中，您可以定義多個 <footer> 元素。

<article>
  <header>
    <h1>這是PHP中文網(wǎng)介紹的頁頭</h1>
    <p><time pubdate datetime="2011-03-15"></time></p>
  </header>
  <p>Windows Internet Explorer 9 (abbreviated as IE9) 這里是PHP中文網(wǎng)</p>
</article>
<footer>
  <p>這里是PHP中文網(wǎng)中的頁腳footer的用法</p>
  <p><time pubdate datetime="2012-03-01"></time></p>
</footer>

這里有效果圖：

tuyi.png

二、我們現(xiàn)在來看看header標簽和footer標簽的另一方面的區(qū)別:

header元素：

表示其最近父元素的一組引導性內(nèi)容。header的父元素可能是分節(jié)元素（artic，section，aside等）或根元素（body元素）。當header元素的最近父元素是body元素，那么header元素表示的是整個HTML頁面的一組引導性內(nèi)容。如果在HTML文檔中有一個新的區(qū)域內(nèi)容，那么就可以根據(jù)內(nèi)容的需要來添加header元素，這樣做會提高文檔的語義。

footer元素：

表示其最近父元素補充說明的內(nèi)容，footer的父元素可能是分節(jié)元素或根元素。

footer元素內(nèi)容通常與當前所在區(qū)域內(nèi)容有關(guān)系，比如：當前所在區(qū)域內(nèi)容的相關(guān)鏈接、版權(quán)信息等。

當footer元素的最近父元素是body元素，那么footer元素表示的是整個HTML頁面的補充說明。

footer元素通常用來標記頁面內(nèi)容的一些擴展信息，比如：附錄、條款、版本信息、許可協(xié)議、或其他內(nèi)容。

這還有個關(guān)于header標簽和footer標簽區(qū)別的實例：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>PHP中文網(wǎng)演示</title>
</head>
<body>
<article>
<header>
<h3>文章的標題</h3>
<h5>作者</h5>
</header>
<p>我是正文-我是正文-我是正文-------------<></p>
<article>
<head>
<h4>網(wǎng)友的評論</h4>
<p>評論內(nèi)容-評論內(nèi)容-評論內(nèi)容----------</p>
</head>
<footer>
發(fā)布時間：1433223
</footer>
</article>
<footer>
<p>尾部：3000：評論</p>
</footer>
</article>
</body>
</html>

效果是這樣的：

tuer.png

以上就是這篇文章的全部內(nèi)容了（想看更多，歡迎來到PHP中文網(wǎng)學習。更多的編程課程等著你的到來），有問題的可以在下方留言

【小編推薦】

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

input表單如何制作多行文本輸入框？一篇文章教你學會使用input標簽

以上就是html header標簽和footer標簽區(qū)別的兩點總結(jié)（附元素區(qū)別實例）的詳細內(nèi)容，更多請關(guān)注php中文網(wǎng)其它相關(guān)文章！


網(wǎng)站建設是一個廣義的術(shù)語，涵蓋了許多不同的技能和學科中所使用的生產(chǎn)和維護的網(wǎng)站。