<footer>是版权唯一合法语义容器，必须为<body>直接子元素；仅用于真正次要附注（如“All rights reserved”），不可包裹主版权主体（如“© 2024 MySite”），且须配合lang属性与CSS控制样式。
footer 是版权的唯一合法语义容器
直接用 <small> 包整句版权声明是错的——它没语义上下文，屏幕阅读器读不出这是站点级归属，SEO 工具也提取不到结构化数据。W3C 明确要求：站点级版权必须放在 <footer> 里，且 <footer> 应是 <body> 的直接子元素（比如放在 </main> 后、</body> 前）。
常见错误写法：<div class="footer"><small>© 2024 MySite</small></div> 或 <small>© 2024 MySite</small> ——两者都丢失语义锚点，无障碍检测工具（如 axe）会报“语义误用”。
small 只能包裹真正次要的附属成分
<small> 不是“让字变小”的样式工具，而是告诉辅助技术：“这部分可跳过，但法律上需保留”。它该包的，是惯例性附注，不是主版权主体。
-
<small>✅ 合理范围：<small>©</small>、<small>All rights reserved.</small>、<small>保留所有权利</small>、许可证类型（如<small>MIT License</small>） -
<small>❌ 错误范围：<small>© 2024 MySite. All rights reserved.</small>—— 主体 “MySite” 被弱化，读屏器可能完全跳过 - 年份是否套
<small>？取决于语境：若写成© 2024 MySite，年份是固定格式的一部分，不建议单独弱化；若写成Last updated: <small>2024</small>，则适合
多语言和动态年份容易漏掉的关键点
中英文混排时，lang 属性必须显式加在对应片段上，否则屏幕阅读器按默认语言朗读，比如 “MySite Inc.” 没加 lang="en"，中文引擎可能读成“麦赛特”。
立即学习“前端免费学习笔记（深入）”；
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
用 JavaScript 动态插入年份时，不能只改数字：
- 别用
document.write()或innerHTML替换整个<footer>，否则会清空lang、role等语义属性 - 静态回退必须存在：HTML 中先写死
<small>©</small> 2024 MySite，JS 再更新年份部分，不能删掉原始文本 - 动态插入后，记得同步设置语言属性，例如：
document.querySelector('small:last-of-type').setAttribute('lang', 'en')
视觉控制必须用 CSS，不能依赖 small 默认行为
不同浏览器对 <small> 的默认缩放比例不一致（Chrome ≈ 80%，Firefox ≈ 83%），且嵌套 <small><small>x</small></small> 不会进一步缩小——这不是 bug，是规范行为。
要统一尺寸，必须用 CSS 控制：
small { font-size: 0.85em; }
注意：
- 必须用相对单位（
em或rem），禁用font-size: 12px这类绝对值，否则高对比度模式或用户自定义字号下文字可能不可读 - 不要设
display: none或font-size: 0，否则破坏可访问性 -
<small>是行内语义标签，不能直接包裹<p>或<div>，否则 HTML 验证失败
真正难的不是写对标签，而是判断哪部分算“附属”——一旦把公司名、品牌、© 符号本身当成可弱化内容，语义就塌了。
