必须用语义化 <footer> 标签包裹版权信息，作为 <body> 的直接子元素；需添加 rel="license" 指向真实许可证页面；<small> 仅用于弱化次要内容；年份应服务端或构建时注入，避免纯 JS 动态更新。
直接用 <footer> 包裹，别塞进 <p> 里，也别靠 JS 动态加——否则 SEO 抓不到、读屏器读不准、打印时还可能消失。
必须用 <footer>，不是可选项
版权是整页的元数据，不是某一段的附属内容。浏览器、搜索引擎、读屏软件都靠 <footer> 的语义识别归属主体。写成 <div class="copyright"> 或 <small>© 2024 XXX</small> 独立存在，等于主动放弃可访问性和结构化数据支持。
-
<footer>应是<body>的直接子元素，位置尽量靠后（不必绝对末尾） - 别嵌套在
<main>或<article>内部——那属于章节级页脚，不是整页版权 - 如果页面是 SPA，路由切换时得同步更新
<footer>内容和lang属性，否则中文页里英文公司名会被按拼音朗读
rel="license" 不是装饰，链接必须真实可达
加了 rel="license" 却指向 404 页面、跳转短链或作者主页，等于没加。这个属性的作用是建立机器可读的许可关系，目标必须是许可证全文（如 CC BY 4.0 官方文本页、MIT License 原文 URL）。
- 正确：
<a href="https://creativecommons.org/licenses/by/4.0/" rel="license">CC BY 4.0</a> - 错误：
<a href="https://example.com/about" rel="license">关于我们</a>（非协议页） - 错误：
<a href="#" rel="license">MIT License</a>（空链接） - 若用
<link>全局声明，应放在<head>中：<link rel="license" href="LICENSE.txt">
<small> 只能弱化次要部分，不能包整句
<small> 的语义是“附属细则”，比如年份、All rights reserved. 这类可省略但需保留的成分。把整个版权字符串（含公司名、符号、年份）全塞进去，会导致屏幕阅读器降权朗读关键主体。
立即学习“前端免费学习笔记（深入）”；
- 合理：
<footer><small>©</small> 2024 MySite <small>All rights reserved.</small></footer> - 合理：
<footer><p>© 2024 MySite</p><small>开源组件许可详见 LICENSE 文件</small></footer> - 错误：
<footer><small>© 2024 MySite. All rights reserved.</small></footer>
年份自动更新要留降级，别全押给 JS
JS 动态写年份最常见问题是：首屏白屏、爬虫抓取不到、JS 失效时显示空白。服务端渲染或构建时注入才是首选；纯前端方案必须提供静态 fallback。
- 服务端（PHP）：
© <?php echo date('Y'); ?> MySite - 构建工具（Vite）：模板中写
© {year} MySite，插件替换{year} - 纯前端（慎用）：
<footer>© <span id="copyright-year">2024</span> MySite</footer>+ 脚本更新id="copyright-year"，但默认值必须存在 - 别用
document.write()或 innerHTML 替换整段——破坏语义，且无障碍工具可能跳过
最容易被忽略的是：移动端小屏下长版权文字折行错位、链接被截断、字体缩放后布局崩坏。这些不是“样式细节”，而是直接影响可点击性与法律声明有效性的问题——版权链接点不开，等于没声明。
