在HTML中做脚注的一种（糟糕的？）方法

因此，这是我在纯HTML和CSS中显示内嵌脚注的可怕而骇人的方式。没有Javascript。

例如，历史上被引用次数最多的作品是1951年的论文。 ＆lt; summary＆gt; 1＆lt; / summary＆gt; Lowry，O. H.，Rosebrough，N. J.，Farr，A. L. Randall，R.J.J.Biol。化学193，265–275（1951）。 ＆lt; /细节＆gt;描述测定溶液中蛋白质量的测定法。

这是一个魔术元素！ HTML Details元素（＆lt; details＆gt;）创建了一个披露窗口小部件，其中仅当该窗口小部件切换到“打开”状态时，信息才可见。可以使用＆lt; summary＆gt;提供摘要或标签。元件。了解有关MDN的更多信息。

这里的问题是＆lt; details＆gt;是块级元素。默认情况下，启动＆lt; details＆gt;元素将显示在新行上。

详细信息，摘要{显示：内联；垂直对齐：超级; font-size：0.75em;}摘要{光标：指针；} details [open] {display：contents;} details [open] ::: before {content：＆＃34; [＆＃34 ;;}详细信息[打开] ::之后{内容：＆＃34;]＆＃34 ;;}

使用display：inline;将它们变成内联元素-因此不会开始换行。

光标：指针；只是使鼠标用户稍微容易看到该元素是交互式的。

当＆lt; details＆gt; 处于打开状态时，内容将显示为父元素的直接后代。 添加一些方括号，以使脚注的开始和结束位置更加明显。 我本可以使用＆lt; sup＆gt; 元素，以使整个注释成为上标。 但这会产生无效的HTML。 ＆lt;细节＆gt; 元素可以包含任何HTML。 因此，我可以添加一个完全的语义引用。 在ePub中做脚注的“正常”方法是将它们放在节的末尾。 像fn1这样的脚注链接只是超链接。 他们将读者带到文档的该部分。 因此，电子阅读器将在与脚注链接相同的页面上显示脚注的内容： 这样一来，读者就可以轻松搜索所有内容，或者只是按顺序阅读它们。 因为我的风格是内联的，所以很难看到或搜索它们。

而且因为我的风格是互动元素，所以它们给用户带来了与他们互动的身体负担。

主要问题在于电子阅读器使用的呈现引擎。我尝试了一些，但都没有显示＆lt; details＆gt;作为互动元素。

我很想知道它如何在Kindle，Kobo和其他电子阅读器上呈现。如果您想进行测试并向我发送屏幕截图，请点击此处查看测试的HTML。

＆lt;！doctype html＆gt;＆lt; html lang =＆＃34; en-gb＆＃34;＆gt;＆lt; head＆gt; title＆gt;交互式脚注测试＆lt; / title＆gt;＆lt; style＆gt;详细信息，摘要{display：inline;垂直对齐：超级; font-size：0.75em;}摘要{光标：指针；} details [open] {display：contents;} details [open] ::: before {content：＆＃34; [＆＃34 ;;}详细信息[open] ::在{content：＆＃34;]＆＃34 ;;}＆lt; / style＆gt;＆lt; / head＆lt; body＆gt;历史上引用最多的作品，例如，是1951年的纸＆lt;细节＆gt;摘要1＆lt; summary＆gt;。 Lowry，O. H.，Rosebrough，N. J.，Farr，A. L. Randall，R.J.J.Biol。化学193，265-275（1951）。描述了确定溶液中蛋白质量的测定法。像熔融金一样倾倒阳光2 /总和。当然不完全是。树木没有起火，人们并没有突然变得非常富有和极度死亡，海洋也没有闪过蒸汽。实际上，更好的比喻是“不像熔融的金。”＆lt; / details＆gt;我的博客最近在学术论文“详细信息”摘要3“ /”摘要“ span itemscope itemtype = http：// schema”中发表。 org / ScholarlyArticle＆lt; span itemprop =＆＃34; citation＆＃34;＆gt; span itemprop =＆＃34; author＆＃34; itemscope itemtype =＆＃34; http：//schema.org/Person"＆lt; span itemprop =＆＃34; name＆＃34;＆gt;＆lt; span itemprop =＆＃34; familyName＆＃34;＆gt; ; Eishita＆lt; span＆gt ;,＆lt; / span＆gt; span itemprop =＆＃34; givenName＆＃34;＆gt; Farjana Z.＆lt; / span＆gt; / span＆lt; / span＆gt; ; span＆gt; ＆amp; ＆lt; / span＆gt;＆lt; span itemprop =＆＃34; author＆＃34; itemscope itemtype =＆＃34; http：//schema.org/Person"＆lt; span itemprop =＆＃34; name＆＃34;＆gt;＆lt; span itemprop =＆＃34; familyName＆＃34;＆gt; ; Stanley＆lt; span＆gt ;,＆lt; / span＆gt; span itemprop =＆＃34; givenName＆＃34;＆gt; Kevin G.＆lt; / span＆gt; / span＆lt; / span＆gt; ; span＆gt; ＆amp; ＆lt; / span＆gt;＆lt; span itemprop =＆＃34; author＆＃34; itemscope itemtype =＆＃34; http：//schema.org/Person"＆lt; span itemprop =＆＃34; name＆＃34;＆gt;＆lt; span itemprop =＆＃34; familyName＆＃34;＆gt; ; Esquivel＆lt; span＆gt; span＆gt;，/ span＆gt; span itemprop =＆＃34; givenName＆＃34;＆gt; Alain＆lt; / span＆gt;＆lt; / span＆gt; / span＆gt; ＆lt; q＆gt;＆lt; q＆gt;引用项目prop =＆＃34;标题＆＃34;＆gt;量化增强现实游戏输入中的传感器噪声的差异影响。 ＆lt; span＆gt;（＆lt; / span＆gt;时间itemprop =＆＃34; datePublished＆＃34; datetime =＆＃34; 2015＆＃34;＆gt; 2015＆lt; / time＆lt; span＆gt;）＆lt; / span＆gt; ＆lt; span itemprop =＆＃34;发布者＆＃34; itemscope itemtype =＆＃34; http：//schema.org/Organization"＆gt; span itemprop =＆＃34; name＆＃34;＆gt;电气与电子工程师协会（IEEE）＆lt; / span＆gt; ＆lt; / span＆gt;＆lt; span＆gt;。 DOI：＆lt; a itemprop =＆＃34; url＆＃34; href =＆＃34; https：//doi.org/10.1109/gem.2015.7377202"＆gt; https：//doi.org/10.1109/gem.2015.7377202< / a＆gt;＆lt; / span＆gt;＆lt; / span＆lt; / details＆gt; ＆lt; / body＆gt;＆lt; / html＆gt;