例如：
这是我内容的主体。我有此行的脚注链接 [1]。然后，我有更多的内容。其中一些很有趣，也有一些脚注[2]。
[1] 这是我的第一个脚注。
[2] 另一个脚注。
因此，如果我单击“[1]”链接，它会将网页定向到第一个脚注引用，依此类推。我究竟如何在 HTML 中完成此任务？
Ray Vega
问问题
50150 次
10 回答
50
给一个容器一个 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>于 2008-09-15T21:08:32.337 回答
19
最好提供从脚注返回到引用位置的链接（假设存在 1:1 关系）。这很有用，因为后退按钮会将用户带回到他们之前的滚动位置，让读者在文本中找到他们的位置。单击返回到文本中引用脚注的链接的链接将该文本放在窗口的顶部，使读者可以很容易地从他们离开的地方继续。
Quirksmode 在网络上有一个脚注页面（尽管它建议您使用边注而不是脚注，但我认为脚注更易于访问，带有指向脚注和脚注的链接，然后是返回文本的链接，我怀疑它们会更容易跟随屏幕阅读器）。
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 帖子的评论相关联的是Bob Eastern 的关于脚注可访问性的帖子，这表明它没有被阅读，尽管那是几年前的事了，我希望现在屏幕阅读器会有所改进。对于可访问性，可能值得使用文本锚点，例如“返回文本”，或者将其放在链接的标题属性中。尽管我不知道屏幕阅读器会如何处理它，但在原始脚注上放一个可能也是值得的。
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>
（我只是在这里猜测可访问性问题，但由于我提到的任何文章中都没有提到它，所以我认为值得提出。如果有人可以就这个问题发表更多权威意见，我会感兴趣听到。）
于 2008-09-16T00:00:00.503 回答
3
首先，您进入并在每个脚注前面放置一个带有名称属性的锚标记。
<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>
于 2008-09-15T21:11:26.230 回答
1
您需要为所有脚注设置锚标记。用这样的前缀它们应该可以做到：
<a name="FOOTNOTE-1">[1]</a>
然后在页面正文中，像这样链接到脚注：
<a href="#FOOTNOTE-1">[1]</a>
（注意使用名称与href属性）
本质上，只要您设置了 A 标签的名称，您就可以通过链接到 #NAME-USED-IN-TAG 来访问它。
于 2008-09-15T21:14:23.460 回答
1
对于您的情况，您最好分别在链接和页脚中使用 a-href 标签和 a-name 标签。
在滚动到 DOM 元素的一般情况下，有一个jQuery 插件。但如果性能是一个问题，我建议手动进行。这包括两个步骤：
- 查找您正在滚动到的元素的位置。
- 滚动到那个位置。
quirksmode很好地解释了前者背后的机制。这是我的首选解决方案：
function absoluteOffset(elem) {
return elem.offsetParent && elem.offsetTop + absoluteOffset(elem.offsetParent);
}
它使用从 null 到 0 的强制转换，这在某些圈子中是不恰当的礼仪，但我喜欢它:) 第二部分使用window.scroll. 所以剩下的解决方案是：
function scrollToElement(elem) {
window.scroll(absoluteOffset(elem));
}
瞧！
于 2008-09-16T03:18:03.120 回答
1
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>
这样，就不需要在上面和下面写数字了……只要参考文献按正确的顺序在下面列出。
于 2016-07-10T20:12:27.080 回答
0
于 2008-09-15T21:07:21.513 回答
0
在锚标签中使用书签...
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>
于 2008-09-15T21:09:16.780 回答
0
这是我内容的主体。我有此行的脚注链接 [1]。然后，我有更多的内容。其中一些很有趣，也有一些脚注[2]。
[1] 这是我的第一个脚注。
[2] 另一个脚注。
做<a href=#tag>文字</a>
然后在脚注处：<a name="tag"> text</a>
于 2008-09-15T21:09:33.800 回答
0
<a name="1">脚注</a>
呜呜呜
<a href="#1">转到</a>到脚注。
于 2008-09-15T21:09:52.987 回答