脚注标记必须用而非css模拟，因其保障屏幕阅读器播报、纯文本兼容性及seo识别；合规结构要求编号为纯文本或内联链接，禁止嵌套块级元素；跳转需通过id/href显式关联，避免id冲突；还需覆盖css重置、适配行高、pdf导出及xss过滤等细节。
脚注标记为什么必须用 <sup></sup> 而不是 CSS 模拟
因为屏幕阅读器会把 <sup>1</sup> 读作“上标1”，而 vertical-align: super 不触发任何语义播报；复制到纯文本编辑器时，<sup>1</sup> 在支持 Unicode 的字体下可能转为 “¹”，CSS 方式只会留下 “1”；SEO 和结构化数据提取工具也依赖该标签识别脚注关系。
<sup></sup> 脚注的 HTML 结构怎么写才合规
脚注编号应是纯文本或短内联内容，不能包裹 <p></p>、<div>、<code><section></section> 等块级元素：
- ✅ 正确：
<p>早期研究指出该现象存在<sup>1</sup>。</p> - ✅ 正确（带链接）：
<sup>@#@#@#@#@#@#@#@#@#@0</sup> - ❌ 错误：
<sup><div>脚注内容</div></sup>—— 块级元素禁止嵌入 - ❌ 错误：
<sup><sup>1</sup></sup>—— 嵌套无意义，校验失败
脚注跳转和对应锚点怎么配对才不翻车
脚注标记和底部脚注内容需通过 id / href 显式关联，且避免 ID 冲突或重复：
- 脚注标记写成：
<sup>@#@#@#@#@#@#@#@#@#@1</sup> - 脚注容器写成：
<aside id="fn-1" class="footnote"><p>此处为脚注说明文字。</p></aside> - 不要用
name属性（已废弃），也不要省略#导致链接失效 - 多个脚注共用同一 ID 会导致点击只滚动到第一个匹配项
实际项目里容易被忽略的渲染细节
很多脚注在开发环境看着正常，上线后却错位或缩得看不见，问题常出在 CSS 重置或行高干扰：
- 全局样式如 Normalize.css 可能重设了
sup, sub { vertical-align: baseline; }，需显式覆盖为vertical-align: super; - 若父容器设置了
line-height: 1.2且未调整font-size，<sup></sup>默认缩小至 75% 后易导致基线塌陷 - PDF 导出（如 wkhtmltopdf）常丢掉
vertical-align偏移，测试时务必检查生成效果 - CMS 或富文本编辑器输入时，XSS 过滤可能默认剥离
<sup></sup>，白名单里得加进去
脚注不是视觉装饰，而是内容结构的一部分；一旦用了 <sup></sup>，就得连带处理语义、可访问性、导出兼容和样式容错——漏掉任一环，用户看到的可能就是个错位的“1”。
