应使用 HTML data 属性存储起始年份并用 JS 动态计算区间，避免硬编码；服务端渲染需在构建时注入年份；HTML 中须保留默认版权文本以保障无 JS 时的可访问性与 SEO。
用 JavaScript 的 getFullYear() 获取当前年份
静态写死版权年份（比如 © 2020–2023）每次跨年都要手动改，容易遗漏。最直接的办法是用 JS 在页面加载时自动填入当前年份。浏览器原生支持 getFullYear()，不需要额外库，兼容性覆盖所有现代浏览器和 IE9+。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 在
index.html底部的</body>前插入一段内联脚本，避免阻塞渲染 - 选一个有明确
id的版权元素，比如<div id="copyright"></div>，然后用document.getElementById('copyright').textContent = ...更新内容 - 如果想显示区间（如
2020–2024），需额外存储起始年份——不建议硬编码进 JS，可从 HTML 元素的data-start-year属性读取
HTML 中用 data- 属性存起始年份更灵活
把起始年份写死在 JS 里会增加维护成本：换项目、改年份都得动代码。更好的做法是让 HTML 自己“声明”起始时间，JS 只负责计算差值。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 在版权容器上加属性：
<footer data-start-year="2020"><p id="copyright"></p></footer> - JS 里用
document.querySelector('footer').dataset.startYear读取，再拼接–${new Date().getFullYear()} - 注意
dataset返回的是字符串，做数值比较前要parseInt()，否则'2020' > '202'会意外为 true
服务端渲染或静态站点生成器中慎用客户端 JS
如果你用的是 Next.js、Nuxt、Hugo 或 Jekyll 这类工具，getFullYear() 在页面首次渲染时可能显示构建时的年份（因为 JS 还没执行），或者 SEO 抓取时看不到动态内容。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- Next.js / Nuxt：改用
getStaticProps或generate阶段注入年份，避免依赖客户端执行 - Hugo：直接用内置函数
{{ now.Year }}，服务端一次性渲染完成 - Jekyll：用
{{ 'now' | date: '%Y' }}，同样无需 JS - 纯静态 HTML + CI/CD：可在构建脚本里用 sed / jq 替换占位符（如
<!-- YEAR -->），比 JS 更可靠
别忽略无障碍和 SEO 的基础影响
用 JS 动态写入版权年份本身不影响 SEO，但若整个页脚全靠 JS 渲染，搜索引擎可能抓不到完整结构；对屏幕阅读器用户来说，如果版权文本是空的直到 JS 执行完，也会短暂缺失关键信息。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- HTML 中保留一个默认年份（如
© 2020–<span id="current-year">2024</span>），JS 只更新span内容——这样无 JS 时仍可读 - 不要把版权文字整个设为
display: none等待 JS 激活，这会让辅助技术跳过它 - 如果用了
aria-live提示年份更新，反而干扰用户，没必要
实际部署时最容易被忽略的，是构建流程与运行时环境的错位：本地开发看到的是当前年份，CI 构建的产物却可能固化了构建时刻的年份，而你根本没意识到它已经“冻住”了。
