Terence Eden 研究了 一种使用 <details>/<summary> 元素做脚注的方法。 我认为这很聪明。 与跳转到别处解释脚注的超链接不同，这些详情就在文本旁边。 我喜欢代码中的这种接近性。 另外，您还可以获得公开/关闭小部件的本机交互性。
不过，它有一些棘手的地方。 <details> 元素是块级元素，因此它需要变为内联元素才能成为脚注，并需要调整大小和定位以使其看起来“正确”。 我认为它不能放在 <p> 标签中很可惜，这使得它不适合我自己的使用情况。
评论中的 Craig Shoemaker 对原始代码进行了修改，并修改了 CSS，这启发我做了同样的事情。
与其将脚注文本本身直接显示为内联（这很棘手），我将该内容移动到了页面底部的固定位置
我不确定这是否是个好主意，但我也不确定这是否是个糟糕的主意。
最明显的缺点：详细信息可能会阻塞摘要，阻止您再次关闭它们。 :P
不确定它是否已准备好投入使用，但绝对值得探索！
第三个脚注（在我的手机上）覆盖了隐藏它的“按钮”！
好主意！ 您可能希望在打开一个详细信息时关闭所有其他详细信息（使用一些 js）
document.querySelectorAll("details").forEach((targetDetail, i, allDetails) => {targetDetail.onclick = () => {
[...allDetails]
.filter(detail => detail !== targetDetail)
.forEach(detail => detail.removeAttribute("open"));
}
});
我认为内联版本比这里的修改版本要好得多。 单独的框版本有一些问题
单击摘要外部不会关闭它（这很好或不好，具体取决于情况）
框本身没有关闭选项（不好）
打开其他摘要不会关闭已打开的摘要，因此它们会互相覆盖（或隐藏在已打开的框后面）（不好）
《世界报》发表了一篇（无关）文章，其中包含一个非常有趣的脚注系统：当您滚动时，脚注部分会更新一个列表，该列表仅包含与文章正文中屏幕上（视窗）引用相关的脚注。
请查看：https://www.monde-diplomatique.fr/2020/02/SIZAIRE/61344
脚注的全部意义不应该是放在页面最底部吗？ 如果要放在脚注中的内容对于理解至关重要，那么最好将其放在正文中。
我建议不要修改基本概念，而是坚持使用适当的内容设计。 脚注和详细信息都有明确的用例，并且在它们纯粹的语义美感方面闪耀着光芒 :)
是的，在“页面”的底部。 网页可以使用一些“视窗”脚注… :)
绝对不是一个糟糕的主意！ 虽然我不确定为什么我们还在考虑网页上的编号脚注。 当您处理墨水和纸张并且不能将某些词语链接到其他词语（没有在所有地方画线和箭头）时，数字是一个必要的键。 但是，如果我们要为电子文档提供弹出式脚注，为什么不完全放弃数字呢？
我将自己回答这个问题，并说这是因为我们不希望脚注链接看起来像外部链接。 这也是页面内锚点和外部链接之间混淆的原因，但我们都习惯了。