如何在HTML中创建到脚注的链接?

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]。然后，我有更多的内容。有些很有趣，还有一些脚注。

[1] Here is my first footnote.

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

[2] Another footnote.

[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中实现这一点?

10 个解决方案

#1

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

给容器一个id，然后使用#引用该id。

e.g.

如。

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 id="footnote-1">[1] Here is my first footnote.</p>
<p id="footnote-2">[2] Another footnote.</p>

#2

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 sidenotes instead 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对web页脚注(尽管它建议你用旁注代替脚注我认为脚注更加便利,脚注的链接和脚注,后跟一个链接回文本我怀疑他们会更容易跟随屏幕阅读器)。

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页面显示的链接之一有一个箭头,↩,脚注的文本链接后,使用单位& # 8617;对于这个。

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 footnotes which 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.)

(我只是猜测这里的可访问性问题，但是由于我提到的任何一篇文章都没有提到它，所以我认为它值得提起。如果有谁能在这个问题上更有权威的话，我很想听听。

#3

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

首先进入并在每个脚注前面加上一个name属性的锚标记。

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

#4

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 name vs the href attributes)

然后在页面主体中，链接到脚注:< 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.

基本上，每当您设置一个标记的名称时，您都可以通过链接到# name - used - in - tag来访问它。

http://www.w3schools.com/HTML/html_links.asp has more information.

http://www.w3schools.com/HTML/html_links.asp获得更多的信息。

#5

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插件。但如果性能有问题，我建议您手动执行。这包括两个步骤:

Finding the position of the element you are scrolling to.
找到要滚动到的元素的位置。
Scrolling to that position.
滚动到那个位置。

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

奇克斯莫德很好地解释了前者背后的机制。这是我的首选解决方案:

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的转换，这在某些圈子中是不合适的，但是我喜欢:)第二部分使用windows .scroll。剩下的解是:

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

Voila!

瞧!

#6

anchor tags using named anchors

锚标签使用命名锚

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

#7

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>

#8

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]。然后，我有更多的内容。有些很有趣，还有一些脚注。

[1] Here is my first footnote.

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

[2] Another footnote.

[2]另一个脚注。

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

是否< a href=#tag> text < /a>

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

然后在脚注:< a name="tag">文本< /a>

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

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

#9

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

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

bla bla

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

< a href = " 1 " > < / >脚注。

#10

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的回答是好的，但是如果你在“ol”(有序列表)中声明“li”(列表项)而不是将脚注声明为“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>.

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

这样，就不需要把数字写在上面，下面……只要引用的顺序是正确的。

#1