<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> 通常包含有关该部分作者、版权数据或相关文档链接的信息。

尝试一下

属性

该元素仅包含全局属性

使用说明

  • <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 角色 contentinfogeneric 如果是 articleasidemainnavsection 元素的后代,则为 contentinfogeneric,或一个具有 role=articlecomplementarymainnavigationregion 的元素
允许的 ARIA 角色 grouppresentationnone
DOM 接口 HTMLElement

规范

Specification
HTML Standard
# the-footer-element

浏览器兼容性

BCD tables only load in the browser

参见