HTML5中可通过aside/section语义化结构、data-footnote+JS动态渲染、CSS计数器纯样式编号、details/summary可折叠面板、ruby标签注音释义五种方式实现脚注。
如果您在HTML5文档中需要插入脚注并控制其显示效果与样式，可以利用语义化标签与CSS配合实现。以下是实现脚注显示与样式调整的具体步骤：
一、使用aside与footer构建脚注结构
HTML5虽未提供原生footnote元素，但可通过aside（表示与主内容相关但可独立的旁注）或嵌套在footer中的section来语义化标记脚注区域。该方法强调内容可访问性与结构清晰性。
1、在正文需要标注的位置插入带id的sup上标元素，例如：1。
2、在文档末尾或章节底部添加。
4、为每个原始aria-labelledby添加sup并设置id回链，形成双向跳转。
三、使用CSS伪元素与计数器实现纯CSS脚注编号与样式
借助CSS data-footnote与data-footnote伪元素，可在不依赖JavaScript的情况下自动编号脚注引用及条目，提升渲染性能与兼容性。
1、在术语或脚注容器上声明计数器：。
2、为每个脚注触发元素（如data-footnote）设置：sup，并在#footnotes-container中插入编号：
3、为脚注列表项（如span）设置相同计数器，并用id="ref-1"生成前置编号。
4、通过href="#fn-1"与counter-increment调整上标样式，用::after统一脚注链接色。
四、应用body与counter-reset: footnote;实现可折叠脚注面板
该方案增强移动端阅读体验，用户点击即可展开/收起脚注内容，减少页面初始信息密度，同时保持语义完整性。
1、将每个脚注封装为[data-footnote]。
2、为counter-increment: footnote;添加::after和content: counter(footnote);，使其呈现为内联可点击文本而非块级控件。
3、通过ol.footnotes li插入“▼”符号，counter(footnote)插入“▶”，提供视觉反馈。
4、对vertical-align: super;设置font-size: 0.7em;和color: #2c5e92;，避免折叠时布局跳动，注意需禁用details默认的summary以消除圆点。
五、结合[1]
脚注正文文本。
[1]
脚注正文文本。
针对中文、日文等需在字词上方或右侧附加简短说明的场景，summary提供原生支持，可替代传统脚注用于术语解释类轻量标注。
1、包裹被注释文字：display: inline;，其中cursor: pointer;内容默认显示于上方小号字体。
2、添加details[open] summary::after明确基准文字：details:not([open]) summary::after，提升多字词注释准确性。
3、用CSS控制details布局：设置margin: 0.2em 0;，并为padding-left: 0.5em;添加summary保证对齐。
4、通过list-style将注释移至下方，适用于竖排文本或需避免遮挡上方行高的排版需求。
