HTML中无原生注脚标签，需用id锚点+链接实现跳转式脚注；仅表页脚结构，不支持交互；HTML注释不隐藏敏感信息，保密内容应由后端或JS控制。

HTML里没有“注脚”这个原生语义标签

HTML 标准中不存在 或类似语义化标签。所谓“注脚信息”，实际是开发者对内容补充说明的呈现需求，必须靠组合已有标签实现——最常用的是

、

和带 id 的

配合链接跳转。

用

标记文档或章节末尾的元信息

本意不是“脚注”，而是表示其父级节（sectioning content）的页脚，比如整页底部版权、作者信息，或某个

下的引用来源。它不提供跳转能力，纯属结构标注。

常见误用：

¹ 数据来源：国家统计局2025年公报

—— 这段文字只是静态说明，用户无法从正文数字“¹”点过去。

• ✅ 正确场景：页面最下方放版权 + 联系方式；
  结尾放作者 + 发布时间
• ❌ 错误场景：把它当“脚注容器”直接塞编号和解释，指望自动关联正文锚点
• ⚠️ 注意：
  不应嵌套
  ，也不该用来包裹需要交互的脚注弹层

真要实现点击跳转的脚注，得用 id + a href="#xxx"

这是目前最轻量、兼容性最好、无需 JS 也能工作的方案。核心是两处手动配对：正文里的上标链接，和页面某处带对应 id 的目标块。

示例（可直接复制验证）：

<p>全球平均气温较工业化前上升了1.2°C<sup><a href="#fn1">¹</a></sup>。</p><div class="aritcle_card flexRow artxards">
											<div class="artcardd flexRow">
												<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill10828" title="财经HTML高端海报生成"><img
														src="https://img.php.cn/upload/skill/001/246/273/6adaf20dbae7c507.jpg" alt="财经HTML高端海报生成" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
												<div class="aritcle_card_info flexColumn">
													<a rel="nofollow" href="/xiazai/skill10828" title="财经HTML高端海报生成" class="overflowclass">财经HTML高端海报生成</a>
													<p class="overflowclass">复杂得财经如何变成清晰，适合手机看的海报？如何加上你的IP</p>
												</div>
												<a rel="nofollow" href="/xiazai/skill10828" title="财经HTML高端海报生成" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
												</a>
											</div>
										</div>
<p></p><div id="fn1" class="footnote">
<p><strong>¹</strong> 数据来源：IPCC AR6 Synthesis Report, 2024.</p>
</div>

• 上标数字必须是 ，不能只写 ^¹
• 目标 id 名称要和 href 中的保持完全一致（区分大小写）
• 跳转后浏览器会滚动到目标元素顶部，但不会自动加高亮或返回链接——这些得自己补 CSS/JS
• 如果脚注内容含特殊字符（如 > 或 --），别往里面塞 HTML 注释，那会破坏结构

别在

里混用 HTML 注释做标注

有人习惯在

里写 ，以为能隐藏敏感信息。这很危险：

• 注释确实不渲染，但源码里明文可见，爬虫、审查工具、协作同事全能看到
• 若注释里误含 --（比如写成 ），解析器会在第一个 -- 就闭合，导致后面内容意外暴露
• 是语义容器，不是保密区；真正要隐藏的内容，不该出现在 HTML 源码里，而该由后端控制输出或前端 JS 动态加载

真正麻烦的不是怎么标脚注，而是把“标注用途”和“保密用途”混在一起——前者靠结构和链接，后者靠权限和传输控制。

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