footer 标签必须是原生标签、闭合完整、位于 body 直接子级，否则版权信息在语义、SEO 和无障碍层面都会失效。
为什么不能用 div class="footer" 替代 footer
浏览器和辅助技术（如屏幕阅读器）只识别原生 footer 为“内容信息区（contentinfo）”。用 div 模拟会丢失这一语义：Lighthouse 报“缺少语义化页脚”，axe 工具标为“role missing”，搜索引擎可能不把那段文字当主版权抓取。React/Vue 项目里，如果组件最终没渲染出真实 footer 标签（比如被 Fragment 或条件渲染吞掉），效果等同于没写。
small 是可选的，但不是必须套整个版权行
small 的语义是“附属细则”，不是“字体小”。W3C 明确它适用于法律声明、许可条款这类次要但需保留的内容。所以：
- 纯主版权（如
© 2026 MySite. All rights reserved.）直接放footer里完全合法，加small是锦上添花，不加也不算错 - 如果页脚里混着导航链接、联系方式、备案号，用
small包版权行能更清晰地区分主次层级 - 别写成
<footer><small>© 2026</small></footer>——双重弱化，既没提升可访问性，又让版权信息在结构中更难被提取 - 多语言站点中，
small不解决语言适配问题；每个语言版本的footer都得独立写，并配lang="zh"或lang="en"
年份动态更新的三种靠谱做法，别靠 document.write
硬写 2024 在 2026 年已过期，法律效力和专业感都打折扣。但 JS 动态注入有风险：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
- 服务端渲染（PHP/Node.js）：用
© <?php echo date('Y'); ?> MySite—— 稳定、无 JS 依赖、SEO 友好 - 静态站点生成器（Vite/Next.js/Jekyll）：构建时替换占位符（如
{year}），避免运行时执行逻辑 - 纯前端补救（慎用）：用
<time datetime="2026">2026</time>作降级，再配document.querySelector('footer time').textContent = new Date().getFullYear()—— JS 失效时仍显示正确年份 - 绝对别用
document.write(new Date().getFullYear())：执行时机不可控，容易导致 DOM 渲染断裂，部分爬虫看到空年份
footer 不自动贴底，CSS 配合才是关键
只写 <footer>© 2026</footer> 不会让它永远停在视口底部。内容少时它悬在半空，内容多时才自然沉底。真要“始终贴底”，得靠布局控制：
- Flex 布局父容器（如
body）设display: flex; flex-direction: column; min-height: 100vh;，再给main设flex: 1，footer就会被撑到底部 - 用
position: sticky; bottom: 0;要小心：它依赖父容器高度，且在滚动容器内行为不稳定 - 移动端小屏下，长公司名+年份易折行，加
white-space: nowrap比单纯调font-size更可控 - 别忽略
flex-shrink: 0：在display: flex的父容器中，footer可能被压缩塌陷
真正麻烦的从来不是怎么写那行字，而是版权主体变更、合作方署名规则、开源组件合规声明这些背后要对齐的东西——footer 只是出口，不是源头。
