HTML Ссылки
В этой теме:
Ссылки находятся почти на всех веб-страницах. Ссылки позволяют пользователям переходить от страницы к странице.
HTML Ссылки - Гиперссылки
HTML ссылки - это гиперссылки.
Вы можете нажать на ссылку и перейти к другому документу.
При наведении мыши на ссылку стрелка мыши превратится в маленькую стрелку.
Примечание: Ссылка не обязательно должна быть текстовой. Это может быть изображение или любой другой элемент HTML.
HTML ссылки - Синтаксис
Гиперссылки определяются с помощью HTML тега <a> (от слова anchor - якорь):
<a href="url">Текст ссылки</a>
Пример
<a href="https://www.w3schools.com/html/">HTML уроки для начинающих онлайн</a>
Попробуйте сами »
Атрибут href указывает адрес назначения ссылки (https://www.w3schools.com/html/).
Текст ссылки является видимой частью (HTML уроки для начинающих онлайн).
Нажав на текст ссылки, вас отправит на указанный адрес.
Примечание: Без косой черты (слеша) в конце адресов подпапок вы можете сгенерировать два запроса к серверу. Многие серверы автоматически добавляют косую черту в конец адреса, а затем создают новый запрос.
Локальные ссылки
В приведенном выше примере используется абсолютный URL (полный веб-адрес).
Локальная ссылка (ссылка на тот же веб-сайт) указывается с относительным URL (без https://www....).
HTML Цвета ссылок
По умолчанию ссылка будет выглядеть так (во всех браузерах):
- Непосещенная ссылка - подчеркнута и синим цветом
- Посещенная ссылка - подчёркнута и фиолетовым цветом
- Активная ссылка - подчёркнута и красным цветом
Вы можете изменить цвета по умолчанию, используя CSS:
Пример
<style>
a:link {
color: green;
background-color: transparent;
text-decoration: none;
}
a:visited {
color: pink;
background-color: transparent;
text-decoration: none;
}
a:hover {
color: red;
background-color: transparent;
text-decoration: underline;
}
a:active {
color: yellow;
background-color: transparent;
text-decoration: underline;
}
</style>
Попробуйте сами »
Ссылки часто оформляются в виде кнопок с помощью CSS:
Это ссылкаПример
<style>
a:link, a:visited {
background-color: #f44336;
color: white;
padding: 15px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
}
a:hover, a:active {
background-color: red;
}
</style>
Попробуйте сами »
Чтобы узнать больше о CSS, перейдите на наш CSS Учебник.
HTML ссылки - Атрибут target
Атрибут target указывает, где открыть связанный документ.
Атрибут target может иметь одно из следующих значений:
_blank- Открывает связанный документ в новом окне или вкладке_self- Открывает связанный документ в том же окне/вкладке, в котором он был нажат (по умолчанию)_parent- Открывает связанный документ в родительском фрейме_top- Открывает связанный документ в полном теле окна- framename - Открывает связанный документ в названном фрейме
Этот пример откроет связанный документ в новом окне/вкладке браузера:
Пример
<a href="https://www.w3schools.com/"
target="_blank">Посетите W3Schools!</a>
Попробуйте сами »
Совет: Если ваша веб-страница заблокирована во фрейме, вы можете использовать target="_top", чтобы выйти из фрейма:
HTML Ссылки - Изображение как ссылка
Часто в качестве ссылок используются изображения:
Пример
<a href="index.html">
<img src="smiley.gif" alt="HTML уроки для начинающих" style="width:42px;height:42px;border:0;">
</a>
Попробуйте сами »
Примечание: border:0; добавляется, чтобы IE9 (и более ранние версии) не отображал рамку вокруг изображения (когда изображение является ссылкой).
Атрибут Title - Подсказка для ссылок
Атрибут title определяет дополнительную информацию об элементе. Информация чаще всего отображается в виде всплывающей подсказки, когда мышь перемещается над элементом.
Пример
<a href="https://www.w3schools.com/html/" title="Перейти на уроки по HTML начинающих">Уроки по HTML для начинающих</a>
Попробуйте сами »
HTML Ссылки - Создать закладку
HTML-закладки используются, чтобы позволить читателям переходить к определенным частям веб-страницы.
Закладки могут быть полезны, если ваша веб-страница очень длинная.
Чтобы создать закладку, сначала необходимо создать закладку, а затем добавить ссылку на нее.
При нажатии на ссылку страница прокручивается до места с закладкой.
Пример
Сначала создайте закладку с атрибутом id:
<h2 id="C4">Глава 4</h2>
Затем добавьте ссылку на закладку ("Перейти к главе 4") на той же странице:
<a href="#C4">Перейти к главе 4</a>
Или добавьте ссылку на закладку ("Перейти к главе 4") из другой страницы:
Внешние пути
На внешние страницы можно ссылаться по полному URL или по пути относительно текущей веб-страницы.
В этом примере используется полный URL-адрес для ссылки на веб-страницу:
Этот пример ссылается на страницу, расположенную в папке html на текущем веб-сайте:
Этот пример ссылается на страницу, расположенную в той же папке, что и текущая страница:
Вы можете прочитать больше о путях к файлам в главе HTML Пути к файлам на нашем сайте W3Schools на русском.
Резюме раздела
- Используйте элемент
<a>для определения ссылки - Используйте атрибут
hrefдля определения адреса ссылки - Используйте атрибут
targetчтобы определить, где открыть связанный документ - Используйте элемент
<img>(внутри<a>) для использования картинки в качестве ссылки - Используйте атрибут
id(id="значение") для определения закладок на странице - Используйте атрибут
href(href="#значение") для ссылки на закладку
HTML Упражнения
HTML Теги ссылок
| Тег | Описание |
|---|---|
| <a> | Определяет гиперссылку |
Для получения полного списка всех доступных тегов HTML, посетите наш HTML Справочник тегов.
Вопросы для самоконтроля
- Для чего нужны ссылки на веб-страницах?
- Что такое гиперссылки?
- С помощью какого тега определяются гиперссылки на HTML-страницах?
- Какой атрибут указывает адрес назначения гиперссылки на HTML-страницах?
- Какая часть гиперссылки просматривается на веб-страницах?
- Какие объекты на веб-страницах могут быть гиперссылками?
- Какая разница между локальными и абсолютными адресами гиперссылок?
- Какие цвета по умолчанию в гиперссылок?
- С помощью чего можно изменить цвет гиперссылок?
- Какой атрибут указывает, где открыть связанный веб-документ?
- Какие значения в атрибута target?
- Можно ли использовать изображение в качестве ссылки?
- Какой атрибут определяет дополнительную информацию об элементе в виде подсказки?
- Для чего нужны HTML-закладки?
- Что нужно указать, чтобы сделать закладку на странице?
- Какие ссылки используются для перехода по страницам в пределах одного сайта?
- Какие ссылки используются для перехода с одного сайта на другой?
