页脚必须用语义化<footer>标签、采用position: sticky实现可靠贴底、通过CSS Grid响应式布局并确保链接可访问。
页脚不是“塞完内容就完事”的收尾区域，它得在语义正确、结构清晰、响应及时这三点上同时站住脚。用错标签、硬写position: fixed、忽略可访问性，都会让页脚变成 SEO 和无障碍的扣分项。
必须用 <footer>，别用 <div class="footer">
浏览器和读屏软件靠标签判断内容作用，<footer>自带 role="contentinfo"，而 <div class="footer"> 只是普通容器。Lighthouse 检测会报“缺少语义化页脚”，NVDA 也可能跳过你的版权信息。
- 一个页面可以有多个
<footer>：比如每篇博客文末带作者信息的独立页脚 - 不能嵌套在
<header>或<nav>里，应作为<main>或<section>的直接后继 - 别给
<footer>设width或max-width—— 它默认占满父容器宽度，控制子元素更安全
多列链接用 display: grid 而非 float 或 inline-block
小屏下链接挤成一行、图标糊掉、列间距消失，八成是布局方式选错了。Flex 适合动态列数，Grid 更适合固定栏目（如“关于我们｜服务支持｜法律条款｜关注我们”）。
- 推荐写法：
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr))，自动适配列数且不溢出 - 用
gap控制列/行间距，比margin更干净，不触发 margin collapse - 移动端断点设
@media (max-width: 768px)，改grid-template-columns: 1fr实现单列堆叠 - 每列用
<ul>包链接，结构清晰、缩进统一、方便加标题<h3>
position: sticky 是贴底最稳的方式，但前提得满足
position: fixed 看似简单，实际会遮内容、打印时消失、键盘导航可能跳过。真正可靠的“文档流底部”方案是 position: sticky，但它依赖父容器高度。
立即学习“前端免费学习笔记（深入）”；
- 父容器（通常是
<body>或包裹<main>的<div>）需设min-height: 100vh -
<footer>写position: sticky; bottom: 0;，且不能有兄弟元素撑高导致提前粘住 - 若内容不足一屏，页脚会卡在视口底部；若内容超一屏，它会随滚动自然沉底
- 别在
<footer>上写z-index——除非你真需要盖过其他元素，否则容易干扰焦点顺序
联系信息和版权年份要可维护、可点击、可读取
邮箱电话写死成纯文本，用户无法一键拨打或发信；年份每年手动改，漏改就是低级错误；灰色文字配深色背景，对比度不够，WCAG 直接判失败。
- 邮箱用
<a href="mailto:contact@example.com">contact@example.com</a>，电话用<a href="tel:+8613800138000">+86 138-0013-8000</a> - 版权年份用
<script>document.write(new Date().getFullYear())</script>，内联即可，不用额外加载 JS -
a:link和a:visited颜色必须区分（如#1e88e5和#5e35b1），禁用text-decoration: none前先检查对比度 ≥ 4.5:1 - 所有链接必须有
:focus样式，哪怕只是加outline: 2px solid #1976d2
页脚最难的不是写多少内容，而是克制——每个链接是否真有必要？每种颜色是否通过无障碍检测？每次换行是否由 CSS 主动控制而非浏览器被动折行？这些细节不显眼，但一漏就全盘失准。
