footer标签必须闭合，否则浏览器将后续所有内容解析为footer子元素，导致DOM错乱、JS获取失败、CSS样式失效；它须嵌套于节根元素内以明确语义归属，并配合CSS实现贴底效果。
直接用 <footer> 标签，别套 <div class="footer">，否则语义丢失、SEO 和读屏器都认不出来。
为什么必须闭合 <footer> 标签
不写 </footer> 会导致浏览器解析错乱：后续所有 HTML 内容都会被当成 <footer> 的子元素，JS 查不到节点，CSS 的 margin-bottom 失效，甚至整段正文渲染错位。
常见错误：<footer>© 2024 MySite（漏了闭合）
正确写法：<footer>© 2024 MySite</footer>
模板引擎里更要小心：如果变量插值含未转义的 </footer>，会提前截断标签。
用 DevTools 的 Elements 面板确认节点起止是否清晰、父级结构是否符合预期。
年份动态更新的三种写法及取舍
纯前端 JS 最简但有风险：<script>document.querySelector('footer').textContent = '© ' + new Date().getFullYear() + ' MySite';</script>
- JS 未执行前页面显示空白年份
- 爬虫或禁用 JS 环境下年份为空，SEO 打折扣
服务端更稳（如 PHP）：<footer>© <?php echo date('Y'); ?> MySite</footer>
构建时注入（推荐静态站）：Webpack/Vite 插件替换 {year} 占位符，生成时即固化，无运行时依赖。
最省事也最可靠：直接写死 <footer>© 2024–2026 MySite</footer>，年份区间比单年更耐久，无需维护。
让 footer 真正“贴底”的 CSS 关键点
只写 <footer> 不会让它自动停在视口底部——内容少时它悬在半空，内容多时才自然沉底。要实现“粘性底部”，得靠布局控制：
- 给
<body>加min-height: 100vh和display: flex; flex-direction: column -
<main>必须存在且设flex: 1（不能用<div>替代） -
<footer>放在<main>后、</body>前，作为最后一个子元素 - 避免给
<footer>设固定高度后忘记留padding或margin，文字容易贴边难读
别用 position: fixed; bottom: 0 —— 它会让 footer 盖住短页正文末尾，长页又悬在半空，打印和读屏体验全崩。
移动端小屏下链接堆叠混乱怎么修
页脚里一堆平铺链接，在手机上挤成一长条、溢出或强制横向滚动，是高频问题。
不能靠 width: 30% 硬切列宽，要用弹性流控：
- 给包裹链接的容器（如
<div class="footer-links">）设display: flex; flex-wrap: wrap - 每个栏目列（如
<div class="footer-col">）设flex-basis: 30%，比width更稳，Flex 会自动处理间隙 - 在
@media (max-width: 768px)中设flex-direction: column或flex-basis: 100%，强制垂直堆叠
版权文字本身建议用 <small> 包裹，HTML5 明确定义它为“附属细则”，语义精准，且默认字号适中，不需额外重置 font-size。
最容易被忽略的是：多语言站点没做版权文字本地化，比如英文站写 All rights reserved.，中文站却照搬英文句式；还有人把客服按钮、登录框硬塞进 <footer>，误导读屏器——这些都不是“结尾信息”，语义上根本不该放进去。
