<footer>：頁尾元素
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月.
<footer> HTML 元素表示其最近的章節型內容或章節根元素的頁尾。<footer> 通常包含有關該章節作者的信息、版權數據或與相關文檔的鏈接。
嘗試一下
<article>
<h1>How to be a wizard</h1>
<ol>
<li>Grow a long, majestic beard.</li>
<li>Wear a tall, pointed hat.</li>
<li>Have I mentioned the beard?</li>
</ol>
<footer>
<p>© 2018 Gandalf</p>
</footer>
</article>
article {
min-height: 100%;
display: grid;
grid-template-rows: auto 1fr auto;
}
footer {
display: flex;
justify-content: center;
padding: 5px;
background-color: #45a1ff;
color: #fff;
}
屬性
此元素僅包含全域屬性。
使用注意事項
範例
html
<body>
<h3>FIFA World Cup top goalscorers</h3>
<ol>
<li>Miroslav Klose, 16</li>
<li>Ronaldo Nazário, 15</li>
<li>Gerd Müller, 14</li>
</ol>
<footer>
<small>
Copyright © 2023 Football History Archives. All Rights Reserved.
</small>
</footer>
</body>
css
footer {
text-align: center;
padding: 5px;
background-color: #abbaba;
color: #000;
}
無障礙議題
在 Safari 13 之前的版本中，contentinfo 標誌角色未能被 VoiceOver 正確顯示。如果需要支持舊版 Safari 瀏覽器，請在 footer 元素中添加 role="contentinfo"，以確保該標誌能夠被正確顯示。
技術摘要
| 內容類型 | 流內容、捫及內容。 |
|---|---|
| 允許的內容 |
流內容，但不得包含 <footer> 或 <header> 的後代元素。
|
| 標籤省略 | 不允許，開始和結束標籤都是必須的。 |
| 允許的父元素 |
任何接受
流內容 的元素。請注意，<footer> 元素不得是
<address>、<header>
或另一個 <footer> 元素的後代。
|
| 隱含 ARIA 角色 |
contentinfo，或者如果是
article、aside、main、nav 或 section 元素的後代，或具有 role=article、complementary、main、navigation 或 region 的元素，則隱含為 generic。
|
| 允許的 ARIA 角色 |
group、presentation 或
none。
|
| DOM 介面 | HTMLElement |
規範
| Specification |
|---|
| HTML # the-footer-element |
瀏覽器相容性
Loading…