如何在 HTML 中创建指向脚注的链接？

How do I create a link to a footnote in HTML?

提问by Ray

For example:

例如：

This is main body of my content. I have a footnote link for this line [1]. Then, I have some more content. Some of it is interesting and it has some footnotes as well [2].

[1] Here is my first footnote.

[2] Another footnote.

这是我内容的主体。我有这一行的脚注链接 [1]。然后，我还有一些内容。其中一些很有趣，并且还有一些脚注 [2]。

[1] 这是我的第一个脚注。

[2] 另一个脚注。

So, if I click on the "[1]" link it directs the web page to the first footnote reference and so on. How exactly do I accomplish this in HTML?

因此，如果我单击“[1]”链接，它会将网页定向到第一个脚注引用，依此类推。我究竟如何在 HTML 中完成此操作？

回答by Peter Boughton

Give a container an id, then use #to refer to that Id.

给一个容器一个 id，然后用#来引用那个 id。

e.g.

例如

<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>

回答by Sam Hasler

It's good practice to provide a link back from the footnote to where it is referenced (assuming there's a 1:1 relationship). This is useful because the back button will take the user back to scroll position they were at previously, leaving the reader to find their place in the text. Clicking on a link back to where the footnote was referenced in the text puts that text at the top of the window, making it very easy for the reader to pick up where they left off .

提供从脚注到引用位置的链接是一种很好的做法（假设存在 1:1 的关系）。这很有用，因为后退按钮会将用户带回到他们之前所在的滚动位置，让读者在文本中找到他们的位置。单击返回到文本中引用脚注位置的链接会将该文本置于窗口顶部，使读者很容易从上次停下的地方继续阅读。

Quirksmode has a page on footnotes on the web(although it suggests you use sidenotesinstead of footnotes I think that footnotes are more accessible, with a link to the footnote and the footnote followed by a link back to the text I suspect they would be easier to follow with a screen reader).

Quirksmode在网上有一个关于脚注的页面（虽然它建议您使用旁注而不是脚注，但我认为脚注更易于访问，带有指向脚注的链接，脚注后跟指向文本的链接，我怀疑它们会更容易跟随屏幕阅读器）。

One of the links from the quirksmode page suggests having an arrow, ↩, after the text of the footnote linking back, and to use entity ↩ for this.

来自 quirksmode 页面的链接之一建议在脚注文本后面链接一个箭头 ↩，并使用实体 ↩ 为了这。

e.g.:

例如：

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">&#8617;</a> 
</p>
<p id="footnote-2">
   2. Another footnote. <a href="#footnote-2-ref">&#8617;</a>
</p>

I'm not sure how screen readers would handle the entity though. Linked to from the comments of Grubber's post is Bob Eastern's post on the accessibility of footnoteswhich suggests it isn't read, although that was a number of years ago and I'd hope screen readers would have improved by now. For accessibility it might be worth using a text anchor such as "return to text" or perhaps putting it in the title attribute of the link. It may also be worth putting one on the original footnote although I don't know how screen readers would handle that.

我不确定屏幕阅读器将如何处理实体。链接到 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">&#8617;</a> 
</p>
<p id="footnote-2">
   2. Another footnote.
      <a href="#footnote-2-ref" title="return to text">&#8617;</a>
</p>

(I'm only guessing on the accessibility issues here, but since it wasn't raised in any of the articles I mentioned I thought it was worth bringing up. If anyone can speak with more authority on the issue I'd be interested to hear.)

（我只是猜测这里的可访问性问题，但由于它没有在我提到的任何文章中提出，我认为值得提出。如果有人能就这个问题发表更多权威意见，我会感兴趣听到。）

回答by Adrian Dunston

First you go in and put an anchor tag with a name attribute in front of each footnote.

首先，您进入并在每个脚注前放置一个带有名称属性的锚标记。

 <a name="footnote1">Footnote 1</a>
 <div>blah blah about stuff</div>

This anchor tag will not be a link. It will just be a named section of the page. Then you make the footnote marker a tag that refers to that named section. To refer to a named section of a page you use the # sign.

这个锚标签不会是一个链接。它只是页面的一个命名部分。然后将脚注标记设为引用该命名部分的标记。要引用页面的命名部分，请使用 # 符号。

 <p>So you can see that the candidate lied 
 <a href="#footnote1">[1]</a> 
 in his opening address</p>

If you want to link into that section from another page, you can do that too. Just link the page and tack the section name onto it.

如果您想从另一个页面链接到该部分，您也可以这样做。只需链接页面并将部分名称添加到其上即可。

 <p>For more on that, see 
 <a href="mypaper.html#footnote1">footnote 1 from my paper</a>
 , and you will be amazed.</p>

回答by Scott Swezey

You will need to setup anchor tags for all of your footnotes. Prefixing them with something like this should do it:
< a name="FOOTNOTE-1">[ 1 ]< /a>

您需要为所有脚注设置锚标记。用这样的前缀给它们做前缀：
<a name="FOOTNOTE-1">[ 1 ]</a>

Then in the body of your page, link to the footnote like this:
< a href="#FOOTNOTE-1">[ 1 ]< /a>
(note the use of the namevs the hrefattributes)

然后在页面正文中，像这样链接到脚注：
<a href="#FOOTNOTE-1">[1]</a>
（注意名称与href属性的使用）

Essentially, any time you set a name of an A tag, you can then access it by linking to #NAME-USED-IN-TAG.

本质上，只要您设置了 A 标记的名称，就可以通过链接到 #NAME-USED-IN-TAG 来访问它。

http://www.w3schools.com/HTML/html_links.asphas more information.

http://www.w3schools.com/HTML/html_links.asp有更多信息。

回答by Andrey Fedorov

For your case, you're probably best off doing this with a-href tags and a-name tags in your links and footers, respectively.

对于您的情况，您可能最好分别在链接和页脚中使用 a-href 标签和 a-name 标签。

In the general case of scrolling to a DOM element, there is a jQuery plugin. But if performance is an issue, I would suggest doing it manually. This involves two steps:

在滚动到 DOM 元素的一般情况下，有一个jQuery 插件。但如果性能是一个问题，我建议手动进行。这包括两个步骤：

1. Finding the position of the element you are scrolling to.
2. Scrolling to that position.

1. 查找要滚动到的元素的位置。
2. 滚动到那个位置。

quirksmodegives a good explanation of the mechanism behind the former. Here's my preferred solution:

quirksmode很好地解释了前者背后的机制。这是我的首选解决方案：

function absoluteOffset(elem) {
    return elem.offsetParent && elem.offsetTop + absoluteOffset(elem.offsetParent);
}

It uses casting from null to 0, which isn't proper etiquette in some circles, but I like it :) The second part uses window.scroll. So the rest of the solution is:

它使用从 null 到 0 的转换，这在某些圈子中不是适当的礼仪，但我喜欢它:) 第二部分使用window.scroll. 所以剩下的解决方案是：

function scrollToElement(elem) {
    window.scroll(absoluteOffset(elem));
}

Voila!

瞧！

回答by Anders

The answer of Peter Boughton is good, but it could be better if instead of declaring the footnote as "p" (paragraph), you declared as "li" (list-item) inside a "ol" (ordered-list):

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>

This way, it's not needed to write the number on top, and below... as long as the references are listed on the right order below.

这样，就不需要在上面和下面写数字了……只要参考文献按下面的正确顺序列出。

回答by Bloodhound

anchor tags using named anchors

使用命名锚点的锚点标签

http://www.w3schools.com/HTML/html_links.asp

http://www.w3schools.com/HTML/html_links.asp

回答by Paul Dixon

Use bookmarks in anchor tags...

在锚标签中使用书签...

    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>

回答by zxcv

This is main body of my content. I have a footnote link for this line [1]. Then, I have some more content. Some of it is interesting and it has some footnotes as well [2].

这是我内容的主体。我有这一行的脚注链接 [1]。然后，我还有一些内容。其中一些很有趣，并且还有一些脚注 [2]。

[1] Here is my first footnote.

[1] 这是我的第一个脚注。

[2] Another footnote.

[2] 另一个脚注。

---

---

Do < a href=#tag> text < /a>

做<a href=#tag>文本</a>

and then at the footnote: < a name="tag"> text < /a>

然后在脚注处：<a name="tag"> text</a>

All without spaces. Reference: http://www.w3schools.com/HTML/html_links.asp

都没有空格。参考：http: //www.w3schools.com/HTML/html_links.asp

回答by Sklivvz

<a name="1">Footnote</a>

<a name="1">脚注</a>

bla bla

布拉布拉

<a href="#1">go</a> to footnote.

<a href="#1">转到</a>脚注。