脚注应放在引用位置所在节内，用或标记，不可用或；参考文献须置于末尾独立区块；css避免position: absolute破坏文档流。

脚注用 @#@#@#@#@#@#@#@#@#@0）。

CSS 控制脚注样式时，position: absolute 是陷阱

为让脚注显示在页面底端，有人用 position: absolute; bottom: 0，结果在长页面中脚注被压在视口底部，脱离原文位置，打印时全堆在最后一页——完全违背脚注“就近解释”的设计初衷。

更稳妥的做法是保留文档流，仅微调视觉表现：

• 用 font-size: 0.85em 和 line-height: 1.4 区分层级，不靠定位强行挪动
• 脚注容器加 margin-top: 0.5em，与上文保持呼吸感
• 若需分栏排版（如学术论文），用 column-count 配合 break-inside: avoid 防止脚注跨栏断裂

真正难的是响应式场景下脚注折叠与展开的交互逻辑——那已经超出纯 HTML/CSS 范畴，需要 JS 控制，不在本文范围。

html-deploy

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

下载

<p>爱因斯坦提出质能方程<sup id="ref1"><a href="#fn1">1</a></sup>。</p>
<div role="note" id="fn1">
  <p><a href="#ref1">↑</a> E=mc²，1905年《狭义相对论》。</p>
</div>

<article><header>...</header><main>...正文，含 <sup>引用</sup>...</main><section aria-labelledby="bib-title"><h2 id="bib-title">参考文献</h2>
    <ol>
<li id="bib01">Einstein, A. (1905). <em>Zur Elektrodynamik bewegter Körper</em>.</li>
    </ol></section></article>

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