<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
# the-footer-element

浏览器兼容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
footer

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

参见