Как создать ссылку на сноску в HTML?

Например:

Это основная часть моего контента. у меня есть сноска для этой линии [1]. Тогда у меня есть еще несколько содержание. Некоторые из них интересны, и это имеет также некоторые сноски [2].

[1] Вот моя первая сноска.

[2] Еще одна сноска.

Итак, если я нажму ссылку "[1]", он направит веб-страницу на первую ссылку сноски и так далее. Как именно это сделать в HTML?

Ответ 1

Дайте контейнеру идентификатор, затем используйте # для ссылки на этот идентификатор.

например

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

Ответ 2

Хорошей практикой является предоставление ссылки со сноски на то, на что она ссылается (при условии, что существует соотношение 1:1). Это полезно, потому что кнопка "Назад" вернет пользователя назад, чтобы прокрутить позицию, на которой они были ранее, что позволяет читателю найти свое место в тексте. Нажав на ссылку, где ссылка ссылается в тексте, текст помещается в верхнюю часть окна, что упрощает чтение читателем, где они остановились.

В Quirksmode есть страница в сносках в Интернете (хотя она предлагает вам использовать sidenotes вместо сносок Я думаю, что сноски более доступны, со ссылкой на сноску и сноской, за которой следует ссылка, к тексту, который, как я подозреваю, им будет легче следовать с программой чтения с экрана).

Одна из ссылок на странице quirksmode предполагает наличие стрелки ↩ после текста ссылки на сноску и использование объекта & # 8617; для этого.

например:.

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>

Я не уверен, что экранные ридеры будут обрабатывать сущность. Связанный с комментариями сообщения Груббера Боб Восточный пост по доступности сносок, который предполагает, что он не читается, хотя это был ряд лет назад, и я надеюсь, что читатели экрана будут улучшены. Для доступности можно использовать текстовый якорь, такой как "возврат к тексту" или, возможно, поместить его в атрибут 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>

(Я только догадываюсь о проблемах доступности здесь, но поскольку он не был затронут ни в одной из статей, о которых я упоминал, я думал, что стоит подняться. Если кто-то может говорить с большим авторитетом по этому вопросу, я бы быть заинтересованным услышать.)

Ответ 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>

Ответ 4

Вам нужно будет установить метки привязки для всех ваших сносок. Префикс их с чем-то вроде этого должен сделать это:
< a name=" FOOTNOTE-1" > [1]/а >

Затем в теле вашей страницы ссылайтесь на сноску следующим образом:
< a href=" # FOOTNOTE-1" > [1] </а >
(обратите внимание на использование имени и атрибутов href)

По существу, каждый раз, когда вы задаете имя тега A, вы можете получить к нему доступ, связав его С# NAME-USED-IN-TAG.

http://www.w3schools.com/HTML/html_links.asp содержит дополнительную информацию.

Ответ 5

В вашем случае вы, вероятно, лучше всего это делаете с тегами-href и тегами-именами в своих ссылках и нижних колонтитулах соответственно.

В общем случае прокрутки к элементу DOM существует плагин jQuery. Но если производительность является проблемой, я бы предложил сделать это вручную. Это включает в себя два этапа:

Поиск позиции элемента, к которому вы прокручиваете.
Прокрутка к этой позиции.

quirksmode дает хорошее объяснение механизма первого. Вот мое предпочтительное решение:

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

Он использует отбрасывание от нуля до 0, что не является правильным этикетом в некоторых кругах, но мне оно нравится:) Вторая часть использует window.scroll. Таким образом, остальное решение:

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

Voila!

Ответ 6

Ответ Питера Боутона хорош, но было бы лучше, если бы вместо объявления сноски как "p" (абзац), вы объявили как "li" (список) внутри "ol" (упорядоченный список ):

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>

Таким образом, не нужно записывать число сверху и снизу... пока ссылки указаны в правильном порядке ниже.

Ответ 7

метки привязки с использованием именованных якорей

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

Ответ 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>

Ответ 9

Это основная часть моего контента. У меня есть сноска для этой строки [1]. Затем у меня есть еще больше контента. Некоторые из них интересны, и в нем также есть некоторые сноски [2].

[1] Вот моя первая сноска.

[2] Еще одна сноска.

Сделайте < a href= # tag > text </а >

а затем в сноске: < a name= "tag" > text </a>

Все без пробелов. Ссылка: http://www.w3schools.com/HTML/html_links.asp

Ответ 10

< a name= "1" > Сноска </a>

bla bla

< a href= "# 1" > go </a> к сноске.