<footer> 是進入 HTML5 之後加入的頁尾區塊元素，通常會放在頁面或某些區塊的最下方作為「頁尾」使用，這篇文章將會介紹 <footer> 頁尾區塊元素的用法。

原文參考：頁尾區塊 footer

認識 <footer>

<footer> 是 HTML 裡作為定義頁尾的元素，頁尾區塊裡面可以放入文字、logo、導覽連結、作者訊息或版權宣告...等內容，通常會將 <footer> 放在頁面的最下方，或某的區塊的最下方作為「頁尾」使用。

• <footer> 屬於「容器元素」，需要有「起始標籤」以及「結束標籤」，也因為是容器元素，裡頭可以放入其他的子元素。
• <footer> 的顯示類型為「block 塊級元素」，預設會強制換行。
• <footer> 不可以作為 <header>、<footer> 和 <address> 的子元素。

例如下方的 HTML 開啟後，在網頁中會放入一個 <footer>，當中包含 <span> 和 <address> 所組成的內容。

<footer>
  <h4>copyright 2022</h4>
  <address>oxxo.studio@gmail.com</address>
</footer>

通常一份 HTML 只會有一個 <footer>，但如果是頁面中有安排一些文章的區塊，則各個文章區塊也都可以放入各自的 <footer>，例如下方的 HTML，就是將 <footer> 放在 <article> 文章區塊裡。

<article>
  <p>床前明月光，疑是地上霜，舉頭望明月，低頭思故鄉
  </p>
  <footer>
    <h4>下集待續</h4>
  </footer>
</article>

<footer> 支援屬性

<footer> 支援「全域屬性」以及「可見元素的事件屬性」( 參考「HTML 元素屬性」)，例如下方的 HTML，會將 <footer> 加入 style 屬性改變顏色。

html >>>>
<footer style="background:#ccc; padding:10px;">
  <strong>copyright 2022</strong>
  <address>oxxo.studio@gmail.com</address>
</footer>

<footer> 預設樣式

下方列出 <footer> 的預設樣式：

css >>>>
footer {
  display: block;
}

更多教學

大家好，我是 OXXO，是個即將邁入中年的斜槓青年，我有個超過一千篇教學的 STEAM 教育學習網，有興趣可以參考下方連結呦～ ^_^

• Python 教學 ( 學習導讀 )
• Scratch 教學
• GA4 ( Google Analytics 4 ) 教學
• 生成式 AI ( AIGC ) 教學
• ChatGPT 教學
• Midjourney 教學
• HTML 教學