Что это такое, если в ссылке есть знак решетки "#"

94

Я проверил некоторые сайты, и в их URL-адресах есть знак решетки (#). Что оно делает?

 <a href="#" >Link name</a>
html Люк101
источник

Ответы:

106

Это «фрагмент» или «именованный якорь». Вы можете использовать для ссылки на часть документа. Обычно при переходе по ссылке на страницу браузер открывает ее вверху страницы. Но вы ссылаетесь на раздел на полпути вниз, вы можете использовать фрагмент для ссылки на этот заголовок (или что-то еще).

Если <a name="whatever"/>на странице нет тега, браузер просто укажет ссылку на верхнюю часть страницы. Если фрагмент пустой, он также будет ссылаться на верх страницы.

Для фрагмента только <a href="#">Link name</a> , то это просто ссылка на начало текущей страницы.

Вы часто видите, что такие ссылки используются вместе с javascript. Соответствующий стандартам HTML требует наличия hrefатрибута, но если вы планируете обрабатывать запрос с помощью javascript, тогда "#" служит разумным заполнителем.

Дин Хардинг
источник
1
+1 Хотя официальный термин - это фрагмент URL, а не «ссылка на хэш»: w3.org/TR/WD-html40-970708/htmlweb.html#h-4.1.1
Джейсон Холл,
Да, я изменил его на «фрагмент» в своем ответе, потому что это то, что использует большинство людей. Я никогда не знал, что у него "официальное" название :)
Дин Хардинг
2
Почему браузеры рассматривают это как «перейти к началу страницы»: технически вы изменили страницу. После нажатия на ссылку вы заметите, что # фактически добавлен к URL-адресу в адресной строке, и если вы нажмете кнопку «Назад», он снова удалит его. Я бы не сказал, что это ссылка на часть документа, скорее ссылка на место внутри документа. В остальном, в основном то же самое, что я
набирал
URI, заканчивающийся на #, разрешен общим синтаксисом и может рассматриваться как разновидность пустого фрагмента. В типах документов MIME, таких как text / html или любом другом типе XML, пустые идентификаторы, соответствующие этой синтаксически допустимой конструкции, не разрешены. Веб-браузеры обычно отображают верхнюю часть документа для пустого фрагмента. - en.wikipedia.org/wiki/Fragment_identifier
IcyBrk,
Также «Если такого представления не существует, то семантика фрагмента считается неизвестной и фактически не ограничивается». Из rfc3986 ( tools.ietf.org/html/rfc3986#page-24 )
IcyBrk
23

... просто чтобы добавить несколько дополнительных полезных советов.

Вы можете получить доступ и изменить его с помощью document.location.hashJavaScript.

Он может указывать на именованный якорь (например <a name="top"></a>) или на элемент с соответствующим идентификатором (например <div id="top"></div>).

Само по себе изображение (например <a href="#" onclick="pop()">popup</a>) обычно означает, что ссылка используется исключительно для запуска JavaScript. Это плохая практика.

Любой aэлемент должен иметь href, указывающий на действительный ресурс. Если он не существует, рассмотрите возможность использования другого элемента, например button.

Алекс
источник
1
Это хороший момент в том, что это не особенно хорошая практика ... но то, что это нехорошо, не означает, что вы не найдете его таким повсюду :)
Дин Хардинг,
1
@Alex, если это плохая практика, то скажите нам , что хорошая практика будет использовать вместо этого.
Райан Ланди,
@Kyralessa Это было прямо здесь, в следующем абзаце. В любом случае, я сделал правку, так что, надеюсь, она станет более понятной.
Alex
2
@alex, по-видимому, одна из причин, по которой люди используют ссылки вместо кнопок, заключается в том, что им нужен внешний вид ссылок. Как насчет ссылки на страницу, описывающую, как сделать кнопку похожей на ссылку? Например , тест кнопки HTML
Райан Ланди,
1
@alex, не более чем говорит, что использование # в ссылке - плохая практика. Все, о чем спрашивает OP, - это то, что он делает.
Райан Ланди
11

# указывает ссылку на привязку.

Думаю, я бы также упомянул кое-что еще:

Использование '#' в качестве href для ссылки, активирующей JavaScript, - это плохо, потому что это прокручивает страницу вверх, что, вероятно, не то, что вам нужно. Вместо этого используйте javascript:void(0).

Натан Осман
источник
+1 за упоминание о том, что нажатие на эти ссылки заставляет страницу прокручиваться вверх.
Крис Кало
4
Якорь больше не нужен. Начиная с HTML5 (и, возможно, HTML 4) любой элемент с тегом <id> может быть нацелен на идентификатор фрагмента. См. Документацию HTML5: whatwg.org/specs/web-apps/current-work/multipage/…
Basil
2
Не используйте javascript:void(0)ни то, ни другое - используйте, buttonесли это не ссылка.
Alex
11

Знак фунта ( #) указывает на то, что на странице находится привязка. Например, если вы включите это где-нибудь на странице:

<a name="foo"></a>

или совсем недавно:

<div id="foo">*part of page*</div>

а затем вы нажимаете ссылку на странице с href #foo, она перейдет к привязке с именем или divидентификатором foo.

Однако, если у вас есть только href #, он приведет к началу страницы.

ЭлектроБит
источник
2

Это ведет на саму страницу. Он часто используется со ссылками, которые фактически запускают некоторый JavaScript.


источник