【发布时间】：2010-09-09 04:18:44
【问题描述】：
例如：
这是我内容的主体。我有一个 此行的脚注链接 [1]。然后，我还有一些 内容。其中一些很有趣，而且 还有一些脚注 [2]。
[1] 这是我的第一个脚注。
[2] 另一个脚注。
所以，如果我点击“[1]”链接，它会将网页定向到第一个脚注引用，依此类推。我究竟如何在 HTML 中实现这一点？
【问题讨论】：
【发布时间】：2010-09-09 04:18:44
【问题描述】：
给一个容器一个 id，然后使用# 来引用那个 Id。
例如
<p>This is main body of my content. I have a footnote link for this line <a href="#footnote-1">[1]</a>. Then, I have some more content. Some of it is interesting and it has some footnotes as well <a href="#footnote-2">[2]</a>.</p>
<p id="footnote-1">[1] Here is my first footnote.</p>
<p id="footnote-2">[2] Another footnote.</p>【讨论】：
-
@John Sheehan
标签不需要是 标签。当已经有合适的容器时，命名锚是不必要的。 @Pat 答案是正确的。您可以使用 id 链接到 any 标签。
-
这个答案在语义上实际上比添加额外的锚标记更好，因为链接指的是整个段落，而不仅仅是它开头的一个点。见：tantek.com/log/2002/11.html#L20021128t1352
-
另外，这将是一个改进：[1] since "[ 1]”是“脚注1”的缩写
-
还有脚注包含一个参考链接。
-
在语义上不会是
table更好，因为脚注在语义上是不是段落。为参考缩写设置一列是有意义的。 Wikipedia 使用排序列表li元素，这似乎也更好（您可以使用start属性以特定数字开始列表）。
Peter Boughton 的回答很好，但如果不是将脚注声明为“p”（段落），而是在“ol”（有序列表）中声明为“li”（列表项），可能会更好):
This is main body of my content. I have a footnote link for this line <a href="#footnote-1">[1]</a>. Then, I have some more content. Some of it is interesting and it has some footnotes as well <a href="#footnote-2">[2]</a>.
<h2>References</h2>
<ol>
<li id="footnote-1">Here is my first footnote.</li>
<li id="footnote-2">Another footnote.</li>
</ol>
这样一来，就不需要在上面写数字了，下面……只要参考文献按正确的顺序在下面列出。
【讨论】：
最好提供从脚注返回到引用位置的链接（假设存在 1:1 关系）。这很有用，因为后退按钮会将用户带回到他们之前的滚动位置，让读者在文本中找到他们的位置。单击返回到文本中引用脚注的链接的链接将该文本放在窗口的顶部，使读者很容易从他们离开的地方继续。
Quirksmode 在footnotes on the web 上有一个页面（虽然它建议您使用sidenotes 而不是脚注，但我认为脚注更易于访问，带有指向脚注和脚注的链接，后跟链接回文本，我怀疑使用屏幕阅读器会更容易阅读）。
quirksmode 页面中的一个链接建议在脚注的文本后面添加一个箭头 ↩，并使用实体 ↩为此。
例如：
This is main body of my content.
I have a footnote link for this line
<a id="footnote-1-ref" href="#footnote-1">[1]</a>.
Then, I have some more content.
Some of it is interesting and it has some footnotes as well
<a id="footnote-2-ref" href="#footnote-2">[2]</a>.
<p id="footnote-1">
1. Here is my first footnote. <a href="#footnote-1-ref">↩</a>
</p>
<p id="footnote-2">
2. Another footnote. <a href="#footnote-2-ref">↩</a>
</p>
我不确定屏幕阅读器会如何处理实体。与 Grubber 帖子的 cmets 相关联的是 Bob Eastern's post on the accessibility of footnotes，这表明它没有被阅读，尽管那是几年前的事了，我希望现在屏幕阅读器会有所改进。对于可访问性，可能值得使用文本锚点，例如“返回文本”，或者将其放在链接的标题属性中。虽然我不知道屏幕阅读器会如何处理它，但在原始脚注上放一个可能也是值得的。
This is main body of my content.
I have a footnote link for this line
<a id="footnote-1-ref" href="#footnote-1" title="link to footnote">[1]</a>.
Then, I have some more content.
Some of it is interesting and it has some footnotes as well
<a id="footnote-2-ref" href="#footnote-2" title="link to footnote">[2]</a>.
<p id="footnote-1">
1. Here is my first footnote.
<a href="#footnote-1-ref" title="return to text">↩</a>
</p>
<p id="footnote-2">
2. Another footnote.
<a href="#footnote-2-ref" title="return to text">↩</a>
</p>
（我只是在这里猜测可访问性问题，但由于我提到的任何文章中都没有提到它，所以我认为值得提出。如果有人可以在这个问题上更有权威的发言，我会有兴趣听听。）
【讨论】：
-
并不总是一对一的。例如，在 Wikipedia 中，它通常是多对一的，这意味着您拥有 a b c d 链接，而不是 ^ 链接。
-
好吧，我确实说过“假设存在 1:1 的关系”
对于您的情况，您最好分别在链接和页脚中使用 a-href 标签和 a-name 标签。
在滚动到 DOM 元素的一般情况下，有一个jQuery plugin。但如果性能是一个问题，我建议手动进行。这包括两个步骤：
- 查找您正在滚动到的元素的位置。
- 滚动到该位置。
quirksmode 很好地解释了前者背后的机制。这是我的首选解决方案：
function absoluteOffset(elem) {
return elem.offsetParent && elem.offsetTop + absoluteOffset(elem.offsetParent);
}
它使用从 null 到 0 的强制转换，这在某些圈子中是不恰当的，但我喜欢它:) 第二部分使用 window.scroll。所以剩下的解决方案是：
function scrollToElement(elem) {
window.scroll(absoluteOffset(elem));
}
瞧！
【讨论】：
首先你进去，在每个脚注前面放一个带有名称属性的锚标记。
<a name="footnote1">Footnote 1</a>
<div>blah blah about stuff</div>
此锚标记不会是链接。它只是页面的一个命名部分。然后，您将脚注标记作为引用该命名部分的标记。要引用页面的指定部分，请使用 # 符号。
<p>So you can see that the candidate lied
<a href="#footnote1">[1]</a>
in his opening address</p>
如果您想从另一个页面链接到该部分，您也可以这样做。只需链接页面并将部分名称添加到其上即可。
<p>For more on that, see
<a href="mypaper.html#footnote1">footnote 1 from my paper</a>
, and you will be amazed.</p>
【讨论】：
在锚标签中使用书签...
This is main body of my content. I have a footnote link for this
line <a href="#foot1">[1]</a>. Then, I have some more content.
Some of it is interesting and it has some footnotes as well
<a href="#foot2">[2]</a>.
<div>
<a name="foot1">[1]</a> Here is my first footnote.
</div>
<div>
<a name="foot2">[2]</a> Another footnote.
</div>
【讨论】：
【讨论】：