footer标签必须闭合且位置正确，否则会导致DOM错乱、JS获取失败、CSS失效；应作为body直接子元素（全站页脚）或嵌套于article/section内（局部页脚），不可置于main中。
footer 标签必须闭合且放在正确位置
不闭合 <footer> 会导致后续 HTML 被吞进标签内部，JS 查不到元素、CSS 样式失效、屏幕阅读器读错结构。常见现象是整个页面底部塌陷，或版权文字出现在 header 里。
它必须作为 <body> 的直接子元素（全站页脚），或嵌套在 <article>/<section> 内（局部页脚）。别塞进 <main> 里又指望它撑满全宽——<main> 默认有 margin 和 display 行为，会截断 footer 宽度。
-
<body><main>...</main><footer>© 2024</footer></body>✅ 正确位置 -
<body><main>...<footer>© 2024</footer></main></body>❌ 语义错误，这是 main 的页脚，不是全站的 -
<footer>© 2024</footer>（没闭合）❌ 浏览器当成未结束标签，后面所有内容都变它的子节点
版权信息用 small 还是直接放 footer 里
<small> 不是“字体小”，而是 W3C 明确定义的“附属细则”语义：适合法律条款、版权声明、备案号这类次要但需保留的信息。它和 <footer> 是互补关系，不是替代关系。
直接写 <footer>© 2024</footer> 没错，但加 <small> 更精准——尤其当页脚里混着导航链接、联系方式、隐私政策等不同层级内容时。
- 纯版权行：
<footer><small>© <span id="year">2024</span> My Site. All rights reserved.</small></footer> - 多条版权（主站+子产品）：
<footer><small>© 2024 Main Site</small><small>© 2024 Product X</small></footer> - 别用
<small>包导航链接或邮箱——那些是主要可操作内容，不该弱化
站点地图链接必须用列表组织，不能堆成一排
页脚里的“站点地图”不是 XML 文件，是面向用户的快捷导航入口。搜索引擎和键盘用户依赖清晰的结构识别路径，一行十几个 <a> 并列会破坏可访问性，也影响 SEO 权重分配。
每组链接用 <nav> 包裹，加 <h3> 或 <p> 做组标题（如“产品”“支持”），总链接数控制在 12–15 个以内。高频路径优先：隐私政策、服务条款、联系方式、备案号。
- ✅ 正确结构：
<nav aria-label="产品导航"><h3>产品</h3><ul><li><a href="/app">App</a></li><li><a href="/api">API</a></li></ul></nav> - ❌ 错误写法：
<footer><a href="/about">关于我们</a> | <a href="/contact">联系我们</a> | ...</footer>（无结构、无分组、不可键盘导航） - 别把友情链接、广告、登录框塞进 footer——它不是“所有底部内容”的垃圾桶
让 footer 真正“贴底”靠的是 CSS，不是标签名
<footer> 本身没有定位能力。只写标签，页面内容少时它悬在半空；内容长时它自然在末尾——这恰恰是正确行为。所谓“粘性底部”，本质是确保内容短时 footer 也能沉到视口底部，同时不遮挡正文、不脱离文档流。
Flex 布局是目前最稳方案：给 <body> 设 display: flex; flex-direction: column; min-height: 100vh;，再给 <main> 加 flex: 1;。footer 就会被自动推到最后，且保持语义和可访问性。
- 必须设
min-height: 100vh，否则 flex 不生效 - 别用
position: fixed或absolute—— 它会让 footer 盖住长页面末尾、打印异常、读屏器跳过 - 如果用了 CSS Reset，检查是否清掉了
body的默认 margin，否则顶部/底部会多出空白
最容易被忽略的点是：footer 的语义、闭合、位置、CSS 四者必须同步对齐。漏掉任何一个，就可能在 iOS Safari 里错位、在 NVDA 屏幕阅读器中被跳过、或被 Lighthouse 判定为结构异常。不是“写了标签就完事”，而是整套逻辑要闭环。
