<small>仅能修饰附属短语，不可包裹整句法律声明；必须嵌套于<footer>中，用CSS类控制层级与尺寸，并显式重置样式以确保可访问性与一致性。
small标签只能修饰附属短语，不能包裹整句法律声明
直接用包整段“本服务最终解释权归本公司所有”是错的——small不是法律容器，只是语义标记器。它只接受真正可省略、不破坏主内容完整性的附属短语，比如“All rights reserved.”或“含税”。一旦整句被弱化，屏幕阅读器可能跳过公司名或©符号，导致版权归属失效。
- ✅ 正确：
<p>© 2024 XXX 公司。<small>保留所有权利</small></p>—— 主体（©、公司名）保持语义权重，small仅包裹惯例性附注 - ❌ 错误：
<small>© 2024 XXX 公司。保留所有权利</small>—— 整句降权，辅助技术无法识别版权主体 - ⚠️ 高危场景：表单提交按钮旁写
<button>同意</button><small>即视为接受用户协议</small>——这会让协议入口在无障碍链路中不可发现
必须嵌套在footer或语义容器中，单独使用违反HTML5规范
small本身不是语义容器，不能独立承载版权或法律信息。W3C 明确要求站点级版权归属属于页面元数据，必须放在footer里。单独用<small>© 2024</small>会导致结构化数据丢失、SEO 权重稀释、axe 工具报“语义误用”错误。
- ✅ 必须：
<footer><p><small>©</small> 2024 XXX <small>All rights reserved.</small></p></footer> - ❌ 禁止：
<p><small>© 2024 XXX</small></p>（无footer，无上下文） - ⚠️ 注意：
footer应为body直接子元素；若用div模拟页脚，需加role="contentinfo"补语义，但不如原生footer可靠
嵌套无效，多级缩放必须靠CSS类控制
<small>一级<small>二级</small></small>中，“一级”和“二级”渲染尺寸完全一致——这不是浏览器 bug，而是 HTML 规范明确禁止逐层缩放。Chrome 默认约 80%、Firefox 约 83%，Safari 又不同，依赖 UA stylesheet 就等于放弃一致性。
- ✅ 正确做法：用 CSS 类区分层级，例如
<small class="disclaimer">...</small>+<span class="footnote">...</span>，分别设font-size: 0.875rem和font-size: 0.75rem - ❌ 错误操作：以为嵌套
small能实现“更小”，结果尺寸没变，语义还冗余 - ⚠️ 关键细节：用
rem而非px，否则高对比度模式或系统字体缩放时文字可能不可读；禁用em嵌套，避免父级缩放叠加导致跌破 12px
默认缩放不可信，必须显式重置CSS
Normalize.css、Tailwind base styles 或自定义 reset 都可能覆盖small默认行为，导致它和普通文本一样大。尤其在移动端或高DPI屏上，未经干预的small可能实际渲染为 10px 甚至更小，触发 WCAG 1.4.4 缩放失败风险。
立即学习“前端免费学习笔记（深入）”；
- ✅ 必须加样式：
small { font-size: 0.875rem; line-height: 1.6; color: #5a5a5a; } - ❌ 不要依赖浏览器默认：Chrome 80%、Firefox 83%、Safari 不同，且新版可能调整
- ⚠️ 容易被忽略：每次插入
small前，得确认父元素font-size是否稳定——比如main用了font-size: clamp(1rem, 2vw, 1.25rem)，small会继承动态值再缩放，结果不可控
