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