HTML -ссылки
Ссылки есть почти на всех веб-страницах. Ссылки позволяют пользователям переходить со страницы на страницу.
HTML-ссылки — гиперссылки
HTML-ссылки являются гиперссылками.
Вы можете щелкнуть ссылку и перейти к другому документу.
Когда вы наводите мышь на ссылку, стрелка мыши превращается в маленькую руку.
Примечание. Ссылка не обязательно должна быть текстовой. Ссылка может быть изображением или любым другим элементом HTML!
HTML-ссылки — синтаксис
Тег HTML <a>определяет гиперссылку. Он имеет следующий синтаксис:
<a href="url">link text</a>
Наиболее важным атрибутом <a> элемента является
hrefатрибут, указывающий назначение ссылки.
Текст ссылки — это та часть, которая будет видна читателю.
Щелкнув по тексту ссылки, читатель отправится на указанный URL-адрес.
Пример
В этом примере показано, как создать ссылку на W3Schools.com:
<a href="https://www.w3schools.com/">Visit W3Schools.com!</a>
По умолчанию ссылки будут отображаться во всех браузерах следующим образом:
- Непосещенная ссылка подчеркнута и окрашена в синий цвет
- Посещенная ссылка подчеркнута и окрашена в фиолетовый цвет
- Активная ссылка подчеркнута и окрашена в красный цвет
Совет: Ссылки, конечно, можно стилизовать с помощью CSS, чтобы они выглядели иначе!
HTML-ссылки — целевой атрибут
По умолчанию связанная страница будет отображаться в текущем окне браузера. Чтобы изменить это, вы должны указать другую цель для ссылки.
Атрибут targetуказывает, где открыть связанный документ.
Атрибут targetможет иметь одно из следующих значений:
_self- Дефолт. Открывает документ в том же окне/вкладке, где он был нажат_blank- Открывает документ в новом окне или вкладке_parent- Открывает документ в родительском фрейме_top- Открывает документ в полном теле окна
Пример
Используйте target="_blank", чтобы открыть связанный документ в новом окне или вкладке браузера:
<a href="https://www.w3schools.com/"
target="_blank">Visit W3Schools!</a>
Абсолютные URL-адреса и относительные URL-адреса
В обоих приведенных выше примерах в атрибуте используется абсолютный URL -адрес (полный веб-адрес) .href
Локальная ссылка (ссылка на страницу того же веб-сайта) указывается с относительным URL -адресом (без части «https://www»):
Пример
<h2>Absolute URLs</h2>
<p><a href="https://www.w3.org/">W3C</a></p>
<p><a href="https://www.google.com/">Google</a></p>
<h2>Relative
URLs</h2>
<p><a href="html_images.asp">HTML Images</a></p>
<p><a href="/css/default.asp">CSS
Tutorial</a></p>
HTML-ссылки — использование изображения в качестве ссылки
Чтобы использовать изображение в качестве ссылки, просто поместите <img>
тег внутри <a>тега:
Пример
<a href="default.asp">
<img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;">
</a>
Ссылка на адрес электронной почты
Используйте
mailto:внутри
hrefатрибута, чтобы создать ссылку, которая открывает программу электронной почты пользователя (чтобы позволить ему отправить новое электронное письмо):
Пример
<a href="mailto:[email protected]">Send email</a>
Кнопка как ссылка
Чтобы использовать HTML-кнопку в качестве ссылки, необходимо добавить код JavaScript.
JavaScript позволяет указать, что происходит при определенных событиях, например при нажатии кнопки:
Пример
<button
onclick="document.location='default.asp'">HTML Tutorial</button>
Совет: узнайте больше о JavaScript в нашем учебном пособии по JavaScript .
Заголовки ссылок
Атрибут titleуказывает дополнительную информацию об элементе. Информация чаще всего отображается в виде всплывающей подсказки, когда мышь перемещается по элементу.
Пример
<a href="https://www.w3schools.com/html/" title="Go to W3Schools HTML
section">Visit our HTML Tutorial</a>
Подробнее об абсолютных и относительных URL-адресах
Пример
Используйте полный URL-адрес для ссылки на веб-страницу:
<a href="https://www.w3schools.com/html/default.asp">HTML tutorial</a>
Пример
Ссылка на страницу, расположенную в папке html на текущем веб-сайте:
<a href="/html/default.asp">HTML tutorial</a>
Пример
Ссылка на страницу, расположенную в той же папке, что и текущая страница:
<a href="default.asp">HTML tutorial</a>
Вы можете прочитать больше о путях к файлам в главе Пути к файлам HTML .
Краткое содержание главы
- Используйте
<a>элемент для определения ссылки - Используйте
hrefатрибут для определения адреса ссылки - Используйте
targetатрибут, чтобы определить, где открыть связанный документ - Используйте
<img>элемент (внутри<a>), чтобы использовать изображение в качестве ссылки - Используйте
mailto:схему внутриhrefатрибута, чтобы создать ссылку, которая открывает программу электронной почты пользователя.
HTML-теги ссылок
| Tag | Description |
|---|---|
| <a> | Defines a hyperlink |
Полный список всех доступных HTML-тегов см. в нашем Справочнике по HTML-тегам .