sub 和 sup 标签仅用于视觉上下标，不能实现脚注语义与交互；正确做法是用带 id 和 aria-describedby 的 sup 编号配合 aside[role="doc-endnotes"] 结构，并支持锚点跳转与返回链接。

Sub 和 Sup 标签本身不适用于脚注排版，它们只负责视觉上的下标与上标呈现（如化学式 H₂O、数学表达式 E = mc²），不能承载脚注的语义、跳转逻辑或内容分离功能。学术文档中真正需要的“上标脚注编号+底部内容”必须结合语义化结构与CSS/JS协同实现。

脚注编号用 sup，但必须配合 id 与 aria-describedby

脚注编号可使用 <sup></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></sup> 中，帮助屏幕阅读器建立引用关系。

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

避免纯视觉依赖：禁用 vertical-align 手动调整

不要用 CSS 的 vertical-align: super 或 font-size: 70% 模拟上标——这会破坏语义，且在缩放或高对比度模式下易错位。原生 <sup></sup> 和 <sub></sub> 已内置可访问的默认行为，只需轻量微调：

• 保持默认字体大小比例（浏览器已优化）
• 仅在必要时用 line-height 微调行间距，避免撑开段落
• 若需统一所有脚注编号样式，用类名控制，而非全局重置 sup 标签

学术文档推荐结构：用 aside[role="doc-endnote"] + 锚点跳转

符合 W3C 数字出版标准（DPUB-ARIA）的脚注应使用语义容器，并支持双向导航：

• 正文中的上标编号包裹在 @#@#@#@#@#@#@#@#@#@0 内，实现点击返回
• 脚注列表用 @#@#@#@#@#@#@#@#@#@1，提升可用性

进阶：自动编号与交叉引用需 JS 或构建工具辅助

HTML5 原生不支持自动序号生成（如“¹”“²”随新增动态更新）。真实学术写作中：

• 静态文档可用预处理器（如 Markdown + Pandoc）生成带编号的 HTML
• 动态页面可用轻量 JS（如遍历 [data-footnote] 属性自动生成 ID 与反向链接）
• 切勿用 <sup>1</sup><sup>2</sup> 手动写死编号——维护成本高且易出错

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！