如何在 HTML 中制作页脚
把页面的结尾内容放进 <footer> 元素，通常是 <body> 中的最后一部分。和 <header> 一样，它没有默认外观；是 CSS 让它变成页脚栏：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Site footer</title>
<style>
body { margin: 0; font-family: system-ui, sans-serif; }
main { padding: 20px; }
.site-footer { background: #111827; color: #d1d5db; padding: 20px; }
.columns { display: flex; flex-wrap: wrap; gap: 32px; }
.columns h2 { font-size: 14px; color: #fff; margin: 0 0 8px; }
.columns ul { list-style: none; padding: 0; margin: 0; }
.columns li { margin-bottom: 6px; }
.site-footer a { color: #d1d5db; }
.site-footer small { display: block; margin-top: 20px; border-top: 1px solid #374151; padding-top: 12px; }
</style>
</head>
<body>
<main>
<h1>Page content</h1>
</main>
<footer class="site-footer">
<div class="columns">
<div>
<h2>Product</h2>
<ul><li><a href="#">Features</a></li><li><a href="#">Pricing</a></li></ul>
</div>
<div>
<h2>Company</h2>
<ul><li><a href="#">About</a></li><li><a href="#">Careers</a></li></ul>
</div>
<div>
<h2>Legal</h2>
<ul><li><a href="#">Privacy</a></li><li><a href="#">Terms</a></li></ul>
</div>
</div>
<small>© 2026 Acme Inc. All rights reserved.</small>
</footer>
</body>
</html>
© 会显示 © 符号。<small> 把版权这一行标记为附属细则，这是它在 HTML 中的含义，而不只是更小的字号。链接列表是真正的 <ul> 列表，所以大多数屏幕阅读器会告诉用户每一栏有多少个链接。
让页脚保持在底部
在内容很少的页面上，页脚紧贴在内容下方，下面留出一片空白。解决方法是 flex 纵向布局：容器至少和窗口一样高，主体区域占据所有剩余高度。下面的灰色方框代表浏览器窗口：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Footer at the bottom</title>
<style>
body { font-family: system-ui, sans-serif; margin: 12px; }
.window {
height: 260px; border: 2px solid #e5e7eb;
display: flex; flex-direction: column;
}
main { flex: 1; padding: 0 12px; }
footer { background: #2563eb; color: #fff; padding: 10px 12px; }
</style>
</head>
<body>
<div class="window">
<main>
<p>Only one line of content.</p>
</main>
<footer>Footer stays at the bottom</footer>
</div>
</body>
</html>
去掉 main 上的 flex: 1，页脚就会跳到段落下方。在真实页面中，把同样的规则写在 <body> 上，并用 min-height: 100vh（以及 margin: 0）代替固定高度，这样页脚在短页面上会位于底部，在长页面上则位于内容之后。
文章中的页脚
<footer> 是离它最近的文章或区块的结尾，所以一篇博客文章或一条评论都可以有自己的页脚，写上作者、日期或标签：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Article footer</title>
<style>
body { font-family: system-ui, sans-serif; margin: 12px; }
article { border: 1px solid #e5e7eb; border-radius: 8px; padding: 0 14px; }
article footer { border-top: 1px solid #e5e7eb; padding: 8px 0; color: #6b7280; font-size: 14px; }
.tag { background: #e5e7eb; color: #111827; border-radius: 4px; padding: 2px 6px; }
</style>
</head>
<body>
<article>
<h2>Five tips for cleaner HTML</h2>
<p>Indent nested tags, close what you open, and name classes by meaning.</p>
<footer>
Posted in <span class="tag">html</span> <span class="tag">tips</span>
by Ana on <time datetime="2026-09-24">September 24</time>
</footer>
</article>
</body>
</html>
屏幕阅读器只把页面级的页脚当作 contentinfo 地标。文章中的页脚只是一个普通分组，不会和网站页脚相互干扰。
用 address 写联系方式
页面或其所有者的联系信息，请用页脚中的 <address>。它只用于联系方式（而不是内容中出现的任意邮寄地址），浏览器默认以斜体显示它：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>address</title>
</head>
<body style="font-family: system-ui, sans-serif;">
<footer style="border-top: 2px solid #16a34a; padding-top: 8px;">
<address>
Acme Inc., 12 Market Street, Springfield<br>
<a href="mailto:hello@example.com">hello@example.com</a>
</address>
</footer>
</body>
</html>
address 里的换行是 <br> 的合理用法之一。关于邮件链接，参见 mailto 页面。
页脚里能放什么
页脚可以包含链接、列表、表单（订阅新闻邮件）、图片和 <nav>。它不能包含 <header>、另一个 <footer> 或 <main>。页脚中的第二个菜单可以是一个带标签的 <nav>，用来和主菜单区分开：
<footer>
<nav aria-label="Footer">
<a href="/privacy">Privacy</a>
<a href="/terms">Terms</a>
</nav>
</footer>
常见错误
- 把
<footer> 放在 <body> 外面。 所有可见内容都放在 <body> 里，页脚也一样。
- 用
position: fixed 把它固定在下方。 固定的页脚在小屏幕上会遮住内容，还需要到处加内边距。请用 flex 纵向布局的写法。
- 任何地址都用
<address>。 它用于页面或文章作者的联系方式。门店列表中的商店地址用普通的 <p> 即可。
- 用
<br> 标签拼出链接分栏。 请用 <ul> 列表，让结构能被朗读出来。
- 把去年的年份写死。 在模板中更新版权年份，或者由服务器或构建步骤输出它。
