31

例如：

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

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

[2] 另一个脚注。

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

4

10 回答 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">&#8617;</a> 
</p>
<p id="footnote-2">
   2. Another footnote. <a href="#footnote-2-ref">&#8617;</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">&#8617;</a> 
</p>
<p id="footnote-2">
   2. Another footnote.
      <a href="#footnote-2-ref" title="return to text">&#8617;</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 来访问它。


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

于 2008-09-15T21:14:23.460 回答
1

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

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

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

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

使用命名锚的锚标签

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

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

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

于 2008-09-15T21:09:33.800 回答
0

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

呜呜呜

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

于 2008-09-15T21:09:52.987 回答