如何将HTML中的sup标签用于脚注标记，实现上标文字的实战应用？
- 内容介绍
- 文章标签
- 相关推荐
本文共计729个文字，预计阅读时间需要3分钟。
由于屏幕阅读器会将代码块中的内容读出来，以下是对原文的简化
因为屏幕阅读器会将代码块内容读出，所以...
<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 冲突或重复：
- 脚注标记写成：
<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”。
本文共计729个文字，预计阅读时间需要3分钟。
由于屏幕阅读器会将代码块中的内容读出来，以下是对原文的简化
因为屏幕阅读器会将代码块内容读出，所以...
<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 冲突或重复：
- 脚注标记写成：
<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”。