<footer>: The Footer element

<footer> HTML 元素表示其最近的祖级 分段内容 或 切根 元素的页脚。<footer> 通常包含有关该部分作者的信息、版权数据或相关文档的链接。

¥The <footer> HTML element represents a footer for its nearest ancestor sectioning content or sectioning root element. A <footer> typically contains information about the author of the section, copyright data or links to related documents.

Try it

属性

¥Attributes

该元素仅包含 全局属性。

¥This element only includes the global attributes.

使用说明

¥Usage notes

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

示例

¥Examples

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;
}

无障碍问题

¥Accessibility concerns

在 Safari 13 发布之前，contentinfo 里程碑式的作用 并未被 VoiceOver 正确曝光。如果需要支持旧版 Safari 浏览器，请将 role="contentinfo" 添加到 footer 元素以确保地标能够正确曝光。

¥Prior to the release of Safari 13, the contentinfo landmark role was not properly exposed by VoiceOver. If needing to support legacy Safari browsers, add role="contentinfo" to the footer element to ensure the landmark will be properly exposed.

技术总结

¥Technical summary

内容类别 流量内容，可触及的内容。
允许的内容 流量内容，但没有 <footer> 或 <header> 后代。
标签遗漏 无，开始和结束标记都是强制性的。
允许的父级 任何接受 流动内容 的元素。请注意， <footer> 元素不得是 <address>、<header> 或另一个 <footer> 元素的后代。
隐式 ARIA 角色 contentinfo 或 generic（如果是 article、 aside、 main、 nav 或 section 元素的后代，或者是具有 role=article、 complementary、 main、 navigation 或 region 的元素）
允许的 ARIA 角色 group、 presentation 或 none
DOM 接口 HTMLElement

规范

Specification
HTML Standard
# the-footer-element

¥Specifications

浏览器兼容性

BCD tables only load in the browser

¥Browser compatibility

也可以看看

¥See also