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

Question

Например:

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

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

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

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

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

Answer 2

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

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

Одна из ссылок со страницы причудливого режима предполагает наличие стрелки ↩ после текста сноски, ссылающейся назад, и использование для этого объекта entity.

например:.

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>

Я не уверен, как программы чтения с экрана будут обрабатывать объект. С комментариями к сообщению Груббера связана запись Боба Восточного о доступности сносок , в которой говорится, что она не читается, хотя это было несколько лет назад, и я надеюсь, что программы чтения с экрана улучшатся сейчас. Для доступности, возможно, стоит использовать привязку к тексту, например «вернуться к тексту», или, возможно, поместить ее в атрибут заголовка ссылки. Возможно, стоит поставить один в оригинальную сноску, хотя я не знаю, как с этим справятся программы чтения с экрана.

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

Сначала вы вводите якорный тег с атрибутом имени перед каждой сноской.

 <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

Ответ Питера Боутона хорош, но было бы лучше, если бы вместо объявления сноски как "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>

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

Answer 5

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

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

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

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

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

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

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

Voila!

Answer 6

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

Затем в тексте вашей страницы укажите ссылку на сноску следующим образом:
[1]
(обратите внимание на использование имени против атрибутов href )

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

http://www.w3schools.com/HTML/html_links.asp имеет больше информации.

Answer 7

Сноска

бла бла

перейти к сноске.

Answer 8

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

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

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

---

Сделать текст

и затем в сноске: text

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

Answer 9

Использовать закладки в тегах привязки ...

    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 10

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

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