Ссылки встречаются почти на всех веб страницах. Ссылки позволяют пользователям переходить со страницы на страницу.
HTML Ссылки - Гиперссылки
HTML ссылки - это гиперссылки.
Вы можете нажать на ссылку и перейти к другому документу.
Когда вы наведете курсор мыши на ссылку, стрелка мыши превратится в маленькую руку.
Примечание: Ссылка не обязательно должна быть текстовой. Ссылка может быть изображением или любым другим HTML элементом!
HTML Ссылки - синтаксис
HTML тег <a> определяет гиперссылку. Он имеет следующий синтаксис:
<a href="url">текст ссылки</a>
Самый важный атрибут элемента <a> - это атрибут href,
что указывает на пункт назначения ссылки.
Текст ссылки это та часть, которая будет видна читателю.
Нажав на текст ссылки, читатель отправится на указанный URL-адрес.
В этом примере показано, как создать ссылку на Schoolsw3.com:
<a href="https://schoolsw3.com/">Посетить Schoolsw3.com!</a>
Попробуйте сами »
По индексу ссылки будут отображаться следующим образом во всех браузерах:
- Не посещенная ссылка подчеркнута синим цветом
- Посещенная ссылка подчеркнута и окрашена в фиолетовый цвет
- Активная ссылка подчеркнута красным цветом
Совет: Ссылки, конечно, можно стилизовать с помощью CSS, чтобы получить другой вид!
HTML Ссылки - атрибут target
По индексу связанная страница будет отображаться в текущем окне браузера. Чтобы изменить это, необходимо указать другой целевой объект для ссылки.
Атрибут target указывает, где открыть связанный документ.
Атрибут target может иметь одно из следующих значений:
_self- По умолчанию. Открывает документ в том же окне / вкладке, в котором он был нажат_blank- Открывает документ в новом окне или вкладке_parent- Открывает документ в родительском фрейме_top- Открывает документ во всем теле окна
Используйте target="_blank", чтобы открыть связанный документ в новом окне браузера или на новой вкладке:
<a href="https://schoolsw3.com/"
target="_blank">Посетить Schoolsw3!</a>
Попробуйте сами »
Абсолютные и относительные ссылки
В обоих приведенных выше примерах используется абсолютный URL (полный веб-адрес) в атрибуте href.
Локальная ссылка (ссылка на страницу внутри того же веб-сайта) указывается с помощью относительного URL (без "https://www"):
<h2>Абсолютные URLы</h2>
<p><a href="https://www.sw3.org/">sw3C</a></p>
<p><a href="https://www.google.com/">Google</a></p>
<h2>Относительные
URLы</h2>
<p><a href="html_images.php">HTML Изображения</a></p>
<p><a href="/css/index.php">CSS
Учебник</a></p>
Попробуйте сами »
HTML Ссылки - использование изображения в качестве ссылки
Чтобы использовать изображение в качестве ссылки, просто поместите тег
<img> внутри тега <a>:
<a href="index.php">
<img src="smiley.gif" alt="HTML учебник" style="width:42px;height:42px;">
</a>
Попробуйте сами »
Ссылка на адрес электронной почты
Используйте mailto: внутри атрибута href, чтобы создать ссылку, которая открывает пользователя программы электронной почты (чтобы позволить им отправить новое сообщение электронной почты):
<a href="mailto:someone@example.com">Отправлять электронную почту</a>
Попробуйте сами »
Кнопка как ссылка
Чтобы использовать HTML кнопку в качестве ссылки, вы должны добавить некоторый код JavaScript.
JavaScript позволяет указать, что происходит при определенных событиях, таких как нажатие кнопки:
<button onclick="document.location='index.php'">HTML Учебник</button>
Попробуйте сами »
Совет: Узнайте больше о JavaScript в разделе JavaScript Учебник.
Названия ссылок
Атрибут title задает дополнительную информацию об элементе.
Эта информация чаще всего отображается в виде текста всплывающей подсказки при наведении курсора мыши на элемент.
<a href="https://schoolsw3.com/html/" title="Идти к Schoolsw3 HTML
раздел">Посетите HTML Учебник</a>
Попробуйте сами »
Подробнее об абсолютных и относительных URL-адресах
Используйте полный URL-адрес для ссылки на веб страницу:
<a href="https://schoolsw3.com/html/index.php">HTML учебник</a>
Ссылка на страницу, расположенную в папке html на текущем веб сайте:
<a href="/html/index.php">HTML учебник</a>
Ссылка на страницу, расположенную в той же папке, что и текущая страница:
<a href="index.php">HTML учебник</a>
Подробнее о путях к файлам вы можете прочитать в этой главе HTML Пути к файлам.
Краткое содержание главы
- Используйте элемент
<a>для определения ссылки - Используйте атрибут
hrefдля определения адреса ссылки - Используйте атрибут
targetдля определения места открытия связанного документа - Используйте элемент
<img>(внутри<a>) чтобы использовать изображение в качестве ссылки - Используйте
mailto:схему внутри атрибутаhref, чтобы создать ссылку, которая открывает программу электронной почты пользователя
HTML Упражнения
HTML Ссылки теги
| Тег | Описание |
|---|---|
| <a> | Определяет гиперссылку |
Для получения полного списка всех доступных HTML тегов посетите HTML Справочник тегов.