footer是语义化结尾信息容器，必须依附于明确节元素（如body/article/section）且紧贴其末尾，承载所属区块直接相关的元数据，不可滥用为视觉布局工具。
footer 不是“页面最底下那个容器”，而是代表一个内容区块的结尾信息。它必须服务于明确的语义上下文，否则就退化为无意义的 div。
footer 的归属关系决定语义有效性
浏览器和辅助技术靠它所处的父级节元素（如 <body>、<article> 或 <section>）判断其含义。同一页面可有多个 footer，但每个都必须紧贴其所归属区块的结束位置：
- 全站版权、备案号、隐私政策链接 → 放在
<body>的直系子级，且通常为最后一个 - 某篇文章的作者、发布时间、编辑记录 → 放在对应
<article>标签内部，紧贴 前 - 某个章节下的参考资料或术语说明 → 放在该
<section>内部末尾
哪些内容放进 footer 才算语义正确
footer 应承载与所属区块直接相关的元数据，而非视觉上“顺手塞进去”的内容：
- ✅ 允许：版权文字（
<p>© 2025 公司名称</p>）、联系邮箱（用<address>包裹）、备案号、文档修订时间、文章标签 - ✅ 允许：页脚专用导航（用
<nav aria-label="页脚导航">明确标注） - ❌ 禁止：主导航菜单（属于
<nav>职责）、广告横幅、悬浮按钮、表单提交区 - ❌ 禁止：把整站版权栏硬塞进某篇
<article>的 footer 中——这会让屏幕阅读器误读为“这篇文章的结尾”
嵌套与结构的硬性约束
HTML5 对 footer 的位置和包裹关系有明确限制，违反会破坏可访问性与大纲解析：
立即学习“前端免费学习笔记（深入）”；
- 不能作为
<header>、<main>或<nav>的直接子元素（例如<header><footer>...</footer></header>是非法结构） - 不能被非节元素（如
<div>）包裹后仍保留语义 ——<div><footer>...</footer></div>会使 footer 丢失 landmark 意义 - 一个区块内最多一个 footer；重复出现会被验证器报错，也影响辅助技术识别
CSS 布局与兼容性提醒
footer 默认是块级元素，但不会自动“粘底”。实现视觉底部效果需配合布局逻辑：
- 推荐用 Flexbox 控制：给
<body>设display: flex; flex-direction: column; min-height: 100vh;，<main>设flex: 1;，footer 自然沉底 - 避免用
position: fixed或absolute，否则可能遮挡内容、打乱阅读顺序 - 旧版 IE（≤8）不识别 footer 标签，需加
footer { display: block; }保证基本渲染；语义增强则非必需
