<footer>：页脚元素

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

HTML <footer> 元素表示其最近的祖先分段内容的页脚或分段根元素。<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;
}

属性

该元素仅包含全局属性。

使用说明

  • 在 <address> 元素中包含有关作者的信息，该元素可以包含在 <footer> 元素中。
  • 当最近的祖先分段内容或分段根元素是 body 元素时，页脚适用于整个页面。
  • <footer> 元素不是分段内容，因此不会在大纲中引入新的分段。

示例

html
<body>
  <h3>FIFA 世界杯最佳射手</h3>
  <ol>
    <li>米罗斯拉夫 · 克洛泽，16</li>
    <li>罗纳尔多 · 纳扎里奥，15</li>
    <li>格尔德 · 穆勒，14</li>
  </ol>

  <footer>
    <small> 版权所有 © 2023 足球历史档案馆。保留所有权利。 </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 或 generic 如果是 article、aside、main、nav 或 section 元素的后代，则为 contentinfo 或 generic，或一个具有 role=article、complementary、main、navigation 或 region 的元素
允许的 ARIA 角色 group、presentation 或 none
DOM 接口 HTMLElement

规范

Specification
HTML
# the-footer-element

浏览器兼容性

BCD tables only load in the browser

参见