脚注标记必须用<sup>而非CSS模拟，因其保障屏幕阅读器播报、纯文本兼容性及SEO识别；合规结构要求编号为纯文本或内联链接，禁止嵌套块级元素；跳转需通过id/href显式关联，避免ID冲突；还需覆盖CSS重置、适配行高、PDF导出及XSS过滤等细节。
脚注标记为什么必须用 <sup> 而不是 CSS 模拟
因为屏幕阅读器会把 <sup>1</sup> 读作“上标1”，而 vertical-align: super 不触发任何语义播报；复制到纯文本编辑器时，<sup>1</sup> 在支持 Unicode 的字体下可能转为 “¹”，CSS 方式只会留下 “1”；SEO 和结构化数据提取工具也依赖该标签识别脚注关系。
<sup> 脚注的 HTML 结构怎么写才合规
脚注编号应是纯文本或短内联内容，不能包裹 <p>、<div>、<section> 等块级元素：
- ✅ 正确：
<p>早期研究指出该现象存在<sup>1</sup>。</p> - ✅ 正确（带链接）：
<sup><a href="#footnote-1">1</a></sup> - ❌ 错误：
<sup><div>脚注内容</div></sup>—— 块级元素禁止嵌入 - ❌ 错误：
<sup><sup>1</sup></sup>—— 嵌套无意义，校验失败
脚注跳转和对应锚点怎么配对才不翻车
脚注标记和底部脚注内容需通过 id / href 显式关联，且避免 ID 冲突或重复：
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 脚注标记写成：
<sup><a href="#fn-1">1</a></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>默认缩小至 75% 后易导致基线塌陷 - PDF 导出（如 wkhtmltopdf）常丢掉
vertical-align偏移，测试时务必检查生成效果 - CMS 或富文本编辑器输入时，XSS 过滤可能默认剥离
<sup>，白名单里得加进去
脚注不是视觉装饰，而是内容结构的一部分；一旦用了 <sup>，就得连带处理语义、可访问性、导出兼容和样式容错——漏掉任一环，用户看到的可能就是个错位的“1”。
