Question

例如：

这是我内容的主体。我有一个   这一行的脚注链接[1]。然后，我还有更多   内容。其中一些很有意思   也有一些脚注[2]。

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

[2]另一个脚注。

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

Answer 1

为容器指定一个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>

Answer 2

优良作法是提供从脚注到引用位置的链接（假设有1：1的关系）。这很有用，因为后退按钮会将用户带回到之前的滚动位置，让读者在文本中找到它们的位置。单击返回到文本中引用脚注的位置的链接会将该文本放在窗口的顶部，使读者可以轻松地从中断的位置进行拾取。

Quirksmode在footnotes on the web上有一个页面（尽管它建议你使用sidenotes而不是脚注我认为脚注更加可访问，并附有脚注和脚注后面是一个链接回到文本我怀疑他们会更容易使用屏幕阅读器。

quirksmode页面中的一个链接建议在脚注链接后的文本后面加上一个箭头，并使用实体＆amp;＃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>

我不确定屏幕阅读器如何处理该实体。与Grubber的帖子Bob Eastern's post on the accessibility of footnotes的评论相关联，这表明它不被阅读，虽然这是几年前的事情，我希望屏幕阅读器现在已经有所改进。对于可访问性，可能值得使用文本锚点，例如“返回文本”或者可能将其放在链接的title属性中。虽然我不知道屏幕阅读器如何处理它，但也可能值得在原始脚注上加一个。

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>

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

Answer 3

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

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

Answer 4

您需要为所有脚注设置锚标记。用这样的东西作为前缀应该这样做：
＆LT;名称=“FOOTNOTE-1”＆gt; [1]＆lt; / A＆GT;

然后在页面正文中链接到这样的脚注：
＆LT; a href =“＃FOOTNOTE-1”＆gt; [1]＆lt; / A＆GT;
（注意使用名称与 href 属性）

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

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

Answer 5

对于您的情况，您可能最好分别在链接和页脚中使用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));
}

瞧！

Answer 6

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>

这样，只要在下面的正确顺序中列出引用，就不需要在顶部和下面写入数字。

Answer 7

使用命名锚定锚标记

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

Answer 8

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

    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>

Answer 9

这是我内容的主体。我有一个脚注链接[1]。然后，我有更多的内容。其中一些很有趣，它也有一些脚注[2]。

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

[2]另一个脚注。

做＆lt; a href = #tag＆gt;文字＆lt; / A＆GT;

然后在脚注：＆lt; a name =“tag”＆gt;文字＆lt; / A＆GT;

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

Answer 10

＆lt; a name =“1”＆gt;脚注＆lt; / a＆gt;

bla bla

＆lt; a href =“＃1”＆gt; go＆lt; / a＆gt;脚注。

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

10 个答案: