頁尾區塊 <footer>
<footer>
是進入 HTML5 之後加入的頁尾區塊元素,通常會放在頁面或某些區塊的最下方作為「頁尾」使用,這篇文章將會介紹 <footer>
頁尾區塊元素的用法。
認識 <footer>
<footer>
是 HTML 裡作為定義頁尾的元素,頁尾區塊裡面可以放入文字、logo、導覽連結、作者訊息或版權宣告...等內容,通常會將 <footer>
放在頁面的最下方,或某的區塊的最下方作為「頁尾」使用。
<footer>
屬於「容器元素」,需要有「起始標籤」以及「結束標籤」,也因為是容器元素,裡頭可以放入其他的子元素。<footer>
的顯示類型為「block 塊級元素」,預設會強制換行。<footer>
不可以作為<header>
、<footer>
和<address>
的子元素。
例如下方的 HTML 開啟後,在網頁中會放入一個 <footer>
,當中包含 <span>
和 <address>
所組成的內容。
<footer>
<h4>copyright 2022</h4>
<address>[email protected]</address>
</footer>
通常一份 HTML 只會有一個 <footer>
,但如果是頁面中有安排一些文章的區塊,則各個文章區塊也都可以放入各自的 <footer>
,例如下方的 HTML,就是將 <footer>
放在 <article>
文章區塊裡。
<article>
<p>床前明月光,疑是地上霜,舉頭望明月,低頭思故鄉
</p>
<footer>
<h4>下集待續</h4>
</footer>
</article>
<footer>
支援屬性
<footer>
支援「全域屬性」以及「可見元素的事件屬性」( 參考「HTML 元素屬性」),例如下方的 HTML,會將 <footer>
加入 style 屬性改變顏色。
<footer style="background:#ccc; padding:10px;">
<strong>copyright 2022</strong>
<address>[email protected]</address>
</footer>
<footer>
預設樣式
下方列出 <footer>
的預設樣式:
footer {
display: block;
}
意見回饋
如果有任何建議或問題,可傳送「意見表單」給我,謝謝~