HTML
Анкеры и гиперссылки

Вступление

Синтаксис

• <a href="URL or anchor">Link Text</a>

параметры

Ссылка на другой сайт

Это основное использование <a> (а nchor элемент) элемента:

<a href="http://example.com/">Link to example.com</a>

Он создает гиперссылку на URL http://example.com/ как указано атрибутом href (гипертекстовая ссылка), с текстом привязки «Ссылка на example.com». Это будет выглядеть примерно так:

Ссылка на example.com

Чтобы обозначить, что эта ссылка приводит к внешнему веб-сайту, вы можете использовать external тип ссылки:

<a href="http://example.com/" rel="external">example site</a>

Вы можете ссылаться на сайт, который использует протокол, отличный от HTTP. Например, чтобы ссылаться на FTP-сайт, вы можете сделать это,

<a href="ftp://example.com/">This could be a link to a FTP site</a>

В этом случае разница заключается в том, что этот тег привязки запрашивает, чтобы браузер пользователя подключался к example.com с использованием протокола передачи файлов (FTP), а не протокола передачи гипертекста (HTTP).

Это может быть ссылка на FTP-сайт

Открыть ссылку в новой вкладке / окне

<a href="example.com" target="_blank">Text Here</a>

Атрибут target указывает, где можно открыть ссылку. Установив его на _blank , вы сообщаете браузеру открыть его на новой вкладке или в окне (для каждого пользователя).

УЯЗВИМОСТЬ БЕЗОПАСНОСТИ ПРЕДУПРЕЖДЕНИЕ!

Использование target="_blank" дает открытому сайту частичный доступ к объекту window.opener через JavaScript, который позволяет этой странице затем получить доступ и изменить window.opener.location вашей страницы и потенциально перенаправить пользователей на вредоносные или фишинг-сайты.

Всякий раз, когда вы используете это для страниц, которые вы не контролируете, добавьте rel="noopener" в вашу ссылку, чтобы предотвратить window.opener объекта window.opener с запросом.

В настоящее время Firefox не поддерживает noopener , поэтому вам нужно будет использовать rel="noopener noreferrer" для максимального эффекта.

Ссылка на якорь

Якоря могут использоваться для перехода к определенным тегам на странице HTML. Тег <a> может указывать на любой элемент с атрибутом id . Подробнее о идентификаторах читайте в документации по классам и идентификаторам . Якоря в основном используются для перехода к подразделу страницы и используются в сочетании с тегами заголовков.

Предположим, вы создали страницу ( page1.html ) по многим темам:

<h2>First topic</h2>
<p>Content about the first topic</p>
<h2>Second topic</h2>
<p>Content about the second topic</p>

После того, как у вас есть несколько разделов, вы можете создать Оглавление в верхней части страницы с быстрыми ссылками (или закладками) к определенным разделам.

Если вы предоставили атрибут id своим темам, вы можете ссылаться на них

<h2 id="Topic1">First topic</h2>
<p>Content about the first topic</p>
<h2 id="Topic2">Second topic</h2>
<p>Content about the second topic</p>

Теперь вы можете использовать якорь в своем оглавлении:

<h1>Table of Contents</h1>
    <a href='#Topic1'>Click to jump to the First Topic</a>
    <a href='#Topic2'>Click to jump to the Second Topic</a>

Эти привязки также прикреплены к веб-странице, на которой они находятся ( page1.html ). Таким образом, вы можете связывать сайт с одной страницы на другую, ссылаясь на страницу и имя привязки.

 Remember, you can always <a href="page1.html#Topic1">look back in the First Topic</a> for supporting information.

Ссылка, которая запускает JavaScript

Просто используйте протокол javascript: для запуска текста как JavaScript вместо того, чтобы открывать его как обычную ссылку:

<a href="javascript:myFunction();">Run Code</a>

Вы также можете добиться того же, используя атрибут onclick :

<a href="#" onclick="myFunction(); return false;">Run Code</a>

return false; необходимо, чтобы ваша страница не прокручивалась вверх, когда нажимается ссылка на # . Обязательно включите весь код, который вы хотите запустить до него, так как возвращение прекратит выполнение дополнительного кода.

Также следует отметить восклицательный знак ! после hashtag, чтобы страница не прокручивалась вверх. Это работает, потому что любой недопустимый slug приведет к тому, что ссылка не будет прокручиваться нигде на странице, потому что она не может найти элемент, который он ссылается (элемент с id="!" ). Вы также можете использовать любой недопустимый #scrollsNowhere (например, #scrollsNowhere ) для достижения такого же эффекта. В этом случае return false; не требуется:

<a href="#!" onclick="myFunction();">Run Code</a>

Если вы используете что-либо из этого?

Ответ почти наверняка нет . Выполнение JavaScript внутри строки с таким элементом, как это, является довольно плохой практикой. Подумайте об использовании чистых JavaScript-решений, которые ищут элемент на странице и привязывают к нему функцию. Прослушивание события

Также подумайте, действительно ли этот элемент является кнопкой вместо ссылки . Если это так, вы должны использовать <button> .

Ссылка на страницу на том же сайте

Вы можете использовать относительный путь для ссылки на страницы на одном сайте.

<a href="/example">Text Here</a>

Вышеприведенный пример перейдет к example файла в корневом каталоге ( / ) сервера.

Если эта ссылка была на http://example.com , следующие две ссылки приведут пользователя к тому же местоположению

<a href="/page">Text Here</a>
<a href="http://example.com/page">Text Here</a>

Оба вышеперечисленного перейдут к файлу page в корневом каталоге example.com .

Ссылка, которая запускает почтовый клиент

Основное использование

Если значение href Attribute начинается с mailto: он попытается открыть почтовый клиент по клику:

<a href="mailto:[email protected]">Send email</a>

Это поместит адрес электронной почты [email protected] в качестве получателя для вновь созданного письма.

Cc и Bcc

Вы также можете добавлять адреса для cc- или bcc-получателей, используя следующий синтаксис:

<a href="mailto:[email protected][email protected]&[email protected]">Send email</a>

Тема и основной текст

Вы также можете заполнить тему и тело для нового письма:

<a href="mailto:[email protected]?subject=Example+subject&body=Message+text">Send email</a>

Эти значения должны быть закодированы в URL .

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

Ссылка, набирающая номер

Если значение href Attribute начинается с tel: ваше устройство набирает номер при нажатии на него. Это работает на мобильных устройствах или на компьютерах / планшетах, работающих под управлением программного обеспечения - например, Skype или FaceTime, - которые могут совершать телефонные звонки.

<a href="tel:11234567890">Call us</a>

Большинство устройств и программ подскажут пользователю каким-то образом подтвердить номер, который они собираются набрать.