footer是语义化标签，表示内容结尾信息区，必须闭合且位置决定语义范围；联系信息须用address包裹，页脚导航需嵌套带aria-label的nav；视觉贴底需CSS实现，语义正确性优先于视觉位置。
footer 不是“让内容贴到底部”的工具，它只表达语义：这是某段内容的结尾信息区。用错位置或忽略闭合，页面结构就乱了。
footer 必须闭合，且位置决定语义范围
一个没闭合的 <footer> 会让浏览器把后续所有内容都当成它的子元素——document.querySelector('footer') 可能返回 null 或意外包含整个 main，JS 操作和 CSS 选择器都会失效。
语义范围由它所处的父容器决定：
- 放在
<body>直接子级 → 全局页脚（整页底部） - 嵌套在
<article>内 → 这篇文章的页脚（比如作者、发布时间） - 放在
<section>末尾 → 该区块的结尾信息（如“相关资源”链接）
别把它塞进 <header> 或 <nav> 里——那不是“结尾”，是逻辑错误。
立即学习“前端免费学习笔记（深入）”；
联系信息必须用 <address> 包裹
直接写 <p>contact@example.com</p> 是无效语义。屏幕阅读器不会识别这是联系方式，SEO 也抓不到结构化数据。
正确做法：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
<footer>
<address>
<a href="mailto:contact@example.com">contact@example.com</a>
<br>
<a href="tel:+86123456789">+86 123-4567-89</a>
</address>
</footer>
<address> 只能用于联系信息，不能用来标“版权所有”或导航链接；版权文字用 <p> 即可。
页脚导航要用 <nav> 并加 aria-label
一堆链接堆在 footer 里，不加 <nav> 就只是普通段落，读屏器不会提示“这是导航区域”。
推荐写法：
<footer>
<p>© 2026 公司名称 版权所有</p>
<nav aria-label="页脚导航">
<ul>
<li><a href="/privacy">隐私政策</a></li>
<li><a href="/terms">服务条款</a></li>
</ul>
</nav>
</footer>
不加 aria-label，读屏器可能只读成“列表，2项”，完全不知道这是页脚导航。
视觉到底部 ≠ 语义是 footer，CSS 贴底要单独处理
footer 标签本身不控制位置。内容少时，它会悬在页面中间——这不是 bug，是预期行为。
想让它“永远贴底”，得靠 CSS：
- 用
flexbox：给<body>设display: flex; flex-direction: column; min-height: 100vh;，再给main设flex: 1，footer自然沉底 - 避免用
position: absolute; bottom: 0—— 容易遮挡内容、破坏流式布局、移动端错位 - 不要依赖
margin-top: auto在非 flex 容器里生效——它只在 flex 或 grid 上起作用
最常被忽略的一点：footer 的语义正确性，比视觉位置重要得多。搜索引擎和读屏器只认结构，不看它是不是真在屏幕最底下。
