Как создать ссылку на сноску в HTML?
https://stackoverflow.com/questions/66964
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianВопрос
Например:
Это основная часть моего контента.У меня есть сноска для этой линии [1].Тогда у меня есть еще немного контента.Некоторые из них интересны, и в нем также есть несколько сноски [2].
[1] Вот моя первая сноска.
[2] Еще одна сноска.
Итак, если я нажму на ссылку «[1]», она перенаправит веб-страницу на первую ссылку на сноску и так далее.Как именно мне это сделать в HTML?
Решение
Дайте контейнеру идентификатор, затем используйте # для ссылки на этот идентификатор.
например
<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>Другие советы
Хорошей практикой является предоставление обратной ссылки из сноски на то место, где она упоминается (при условии, что соотношение 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">↩</a>
</p>
<p id="footnote-2">
2. Another footnote. <a href="#footnote-2-ref">↩</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">↩</a>
</p>
<p id="footnote-2">
2. Another footnote.
<a href="#footnote-2-ref" title="return to text">↩</a>
</p>
(Я только догадываюсь о проблемах доступности, но, поскольку они не поднимались ни в одной из статей, которые я упомянул, я подумал, что об этом стоит упомянуть.Если кто-нибудь может более авторитетно высказаться по этому вопросу, мне было бы интересно услышать.)
Сначала вы входите и помещаете тег привязки с атрибутом имени перед каждой сноской.
<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>
Вам нужно будет настроить теги привязки для всех ваших сносок.Если добавить к ним что-то вроде этого, это должно сделать:
< 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 имеет больше информации.
В вашем случае, вероятно, лучше всего сделать это с помощью тегов a-href и тегов a-name в ваших ссылках и нижних колонтитулах соответственно.
В общем случае прокрутки к элементу DOM существует плагин jQuery.Но если производительность является проблемой, я бы предложил сделать это вручную.Это включает в себя два шага:
- Поиск позиции элемента, к которому вы прокручиваете.
- Прокрутка до этой позиции.
причудливый режим дает хорошее объяснение механизма, лежащего в основе первого.Вот мое предпочтительное решение:
function absoluteOffset(elem) {
return elem.offsetParent && elem.offsetTop + absoluteOffset(elem.offsetParent);
}
Он использует приведение от нуля к 0, что в некоторых кругах не является правильным этикетом, но мне это нравится :) Во второй части используется window.scroll.Итак, остальная часть решения:
function scrollToElement(elem) {
window.scroll(absoluteOffset(elem));
}
Вуаля!
Ответ Питера Боутона хорош, но было бы лучше, если бы вместо объявления сноски как «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>
Таким образом, не нужно писать номер сверху и снизу...при условии, что ссылки перечислены ниже в правильном порядке.
теги привязки с использованием именованных привязок
Используйте закладки в тегах привязки...
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>
Это основная часть моего контента.У меня есть ссылка на сноску к этой строке [1].Затем у меня есть еще немного контента.Некоторые из них интересны и содержат сноски [2].
[1] Вот моя первая сноска.
[2] Еще одна сноска.
Введите < a href=#tag> текст </a>
а затем в сноске:< a name="tag"> текст </a>
Всё без пробелов.Ссылка: http://www.w3schools.com/HTML/html_links.asp
<a name="1">Сноска</a>
бла бла
<a href="#1">перейти</a> к сноске.
