Sub 和 Sup 标签仅用于视觉上下标，不能实现脚注语义与交互；正确做法是用带 id 和 aria-describedby 的 sup 编号配合 aside[role="doc-endnotes"] 结构，并支持锚点跳转与返回链接。
Sub 和 Sup 标签本身不适用于脚注排版，它们只负责视觉上的下标与上标呈现（如化学式 H2O、数学表达式 E = mc2），不能承载脚注的语义、跳转逻辑或内容分离功能。学术文档中真正需要的“上标脚注编号+底部内容”必须结合语义化结构与CSS/JS协同实现。
脚注编号用 sup，但必须配合 id 与 aria-describedby
脚注编号可使用 <sup> 实现上标样式，但需赋予唯一 id，并关联到底部脚注区域，确保可访问性与语义正确：
<p>爱因斯坦质能方程提出于1905年<sup id="fnref-1">1</sup>。</p>
<div role="doc-endnotes">
<ol>
<li id="fn-1" role="doc-endnote">A. Einstein, “Zur Elektrodynamik bewegter Körper,” <em>Annalen der Physik</em>, 1905.</li>
</ol>
</div>
同时建议添加 aria-describedby="fnref-1" 到 <sup> 中，帮助屏幕阅读器建立引用关系。
避免纯视觉依赖：禁用 vertical-align 手动调整
不要用 CSS 的 vertical-align: super 或 font-size: 70% 模拟上标——这会破坏语义，且在缩放或高对比度模式下易错位。原生 <sup> 和 <sub> 已内置可访问的默认行为，只需轻量微调：
立即学习“前端免费学习笔记（深入）”；
- 保持默认字体大小比例（浏览器已优化）
- 仅在必要时用
line-height微调行间距，避免撑开段落 - 若需统一所有脚注编号样式，用类名控制，而非全局重置
sup标签
学术文档推荐结构：用 aside[role="doc-endnote"] + 锚点跳转
符合 W3C 数字出版标准（DPUB-ARIA）的脚注应使用语义容器，并支持双向导航：
- 正文中的上标编号包裹在
<a href="#fn-1"><sup>1</sup></a>内，实现点击返回 - 脚注列表用
<aside role="doc-endnotes">包裹，每条用<li id="fn-1"> - 脚注末尾加返回链接：
<a href="#fnref-1">↩</a>，提升可用性
进阶：自动编号与交叉引用需 JS 或构建工具辅助
HTML5 原生不支持自动序号生成（如“¹”“²”随新增动态更新）。真实学术写作中：
- 静态文档可用预处理器（如 Markdown + Pandoc）生成带编号的 HTML
- 动态页面可用轻量 JS（如遍历
[data-footnote]属性自动生成 ID 与反向链接） - 切勿用
<sup>1</sup><sup>2</sup>手动写死编号——维护成本高且易出错
