试一试
<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: white;
}
属性
此元素仅包含全局属性。
用法说明
无障碍
在 Safari 13 发布之前，contentinfo 地标角色并未被 VoiceOver 正确公开。如果需要支持旧版 Safari 浏览器，请将 role="contentinfo" 添加到 footer 元素，以确保地标能够正确公开。
示例
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: black;
}
技术摘要
| 内容类别 | 流内容，可感知内容。 |
|---|---|
| 允许内容 |
流内容，但没有 <footer> 或 <header> 后代。 |
| 标签省略 | 无，起始标签和结束标签都必须存在。 |
| 允许父级 | 接受 流内容的任何元素。请注意，<footer> 元素不能是 <address>、<header> 或另一个 <footer> 元素的后代。 |
| 隐式 ARIA 角色 |
contentinfo，或者如果它是 article、aside、main、nav 或 section 元素的后代，则为 generic，或带有 article、complementary、main、navigation 或 region 角色的元素。 |
| 允许的 ARIA 角色 |
group、presentation 或 none |
| DOM 接口 | HTMLElement |
规范
| 规范 |
|---|
| HTML # the-footer-element |
浏览器兼容性
加载中…