<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月.
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; } 属性
该元素仅包含全局属性。
使用说明
示例
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 |
浏览器兼容性
Loading…