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