版权信息必须置于<footer>中，<small>仅用于修饰次要法律附注（如“保留所有权利”），不可包裹©符号或公司名，且需CSS显式设置字号以保障可访问性。
别用 <small> 包整句版权，它不是版权容器，只是修饰附属部分的语义标签。 直接套 <small>© 2024 XXX</small> 看似省事，实则破坏语义结构、干扰屏幕阅读器、削弱 SEO 权重，还可能在重置 CSS 后完全不缩放。
版权信息必须放在 <footer> 里
HTML5 明确要求站点级版权属于页面元数据，语义上归属 <footer>。这个标签是块级容器，天然承载联系信息、导航链接、法律声明等全局内容。
-
<footer>是可访问性链路起点——读屏软件会将其识别为“页脚区域”，用户可快捷跳转 - 搜索引擎把
<footer>内容视作低权重但高可信度的站点元数据，利于品牌露出 - 错误写法：
<p><small>© 2024 XXX</small></p>（无语义容器，孤立存在） - 正确结构：
<footer><p>© 2024 XXX 公司。<small>保留所有权利</small></p></footer>
<small> 只能修饰“真正次要”的成分
它的作用不是“让字变小”，而是告诉机器：“这部分内容法律上需保留，但用户阅读主信息时可跳过”。浏览器默认缩放（约 80%）只是该语义的视觉映射。
- 适合包裹：年份（
<small>2024</small>）、许可类型（<small>MIT License</small>）、惯例附注（<small>All rights reserved.</small>） - 禁止包裹：© 符号、公司名、产品名、核心服务描述——这些是版权主体，语义权重高
- 表单提示也适用：
<input name="email"><small>邮箱格式不正确</small>，因它是对主输入的附属校验说明 - 嵌套无效：
<small>A<small>B</small></small>中 A 和 B 渲染尺寸完全一致，规范禁止多级缩放
CSS 必须显式干预，不能依赖浏览器默认
Normalize.css、Tailwind 的 base styles 或自定义 reset 都可能覆盖 <small> 默认缩放（Chrome 80%、Firefox 83%、Safari 不同），导致它和普通文本一样大。
立即学习“前端免费学习笔记（深入）”；
- 必须加样式：
small { font-size: 0.875rem; line-height: 1.6; color: #5a5a5a; } - 用
rem而非px，确保尊重用户系统字体缩放设置（无障碍刚需） - 禁用
em嵌套：若父元素设font-size: 1.2em，<small>会先继承再缩放，可能跌破 12px，影响可读性 - 避免
display: block（除非真需要换行），<small>本是行内容器，强行块化易破坏内联流布局
多数“小字号需求”其实不该用 <small>
按钮旁的“仅限会员”、卡片底部的“更新于3小时前”、标题右侧的“（含税）”——这些本质是 UI 视觉辅助，不构成法律/归属/免责声明类语义，硬套 <small> 反而污染结构。
- 推荐方案：
<span class="text-xs">仅限会员</span>+ CSS 控制font-size: 0.75rem - 表单错误提示可用
<div role="alert"><small>.../div>，但语义主体是role="alert"，<small>仅负责视觉弱化 - 真正容易被忽略的是：每次想用
<small>，都得问一句——这段文字删掉会影响法律效力或权属认定吗？如果不会，大概率不该用它
