HTML тег ссылки
Всем привет продолжаю изучать HTml и продолжаю публиковать небольшие статейки. Сегодня мы поговорим о ссылках в HTML. Постараюсь объяснять просто и доходчиво , да что там как смогу , так и объясню. Поехали , начнем с примера как выглядит сама ссылка в html.
Пример ссылки
<a href="https://for-web.ru/">Посетите веб справочник</a>
Определение и использование
Элемент <a> (в переводе с англ. anchor — якорь) предназначен для создания ссылок, которая используется для связи одной страницы с другой. Самым важным атрибутом элемента <a> является атрибут href, указывающий место назначения ссылки. Адрес ссылки может быть абсолютным и относительным. Абсолютные ссылки - это те адреса которые указывают на полный путь к файлу, документу , картинке.
https://for-web.ru/
Относительные ссылки - это те адреса которые построены относительно корня сайта.
/html
По умолчанию во всех браузерах ссылки будут выглядеть следующим образом:
- Непосещенная ссылка подчеркнута и синего цвета.
- Посещенная ссылка подчеркнута и окрашена в фиолетовый цвет.
- Активная ссылка подчеркнута и красна.
Соответственно оформление ссылок можно переопределить с помощью CSS.
Настройки CSS по умолчанию
Большинство браузеров будут отображать элемент <a> со следующими значениями по умолчанию:
a:link, a:visited {
color: (internal value);
text-decoration: underline;
cursor: auto;
}
a:link:active, a:visited:active {
color: (internal value);
}
Атрибуты
Атрибуты | Значения | Описание |
---|---|---|
download | filename | Предлагает скачать указанный по ссылке файл |
href | URL | Задаёт адрес документа |
hreflang | language_code | Идентифицирует язык текста по ссылке |
media | media_query | Указывает, для какого носителя / устройства оптимизирован связанный документ. |
ping | list_of_URLs | Определяет разделенный пробелами список URL-адресов, на которые при переходе по ссылке браузером (в фоновом режиме) будут отправляться запросы на публикацию с основным пингом. Обычно используется для отслеживания. |
referrerpolicy | no-referrer no-referrer-when-downgrade origin origin-when-cross-origin same-origin strict-origin-when-cross-origin unsafe-url | Указывает, какую информацию о реферере следует отправить со ссылкой |
rel | alternate author bookmark external help license next nofollow noreferrer noopener prev search tag | Определяет связь между текущим документом и связанным документом |
target | _blank _parent _self _top | Указывает, где открыть связанный документ |
type | media_type | Указывает MIME-тип документа, на который ведёт ссылка |
Примеры
Как использовать изображение в качестве ссылки:
<a href="https://for-web.ru/">
<img border="0" src="путь к картинке" width="100" height="100">
</a>
Как открыть ссылку в новом окне браузера:
<a href="https://for-web.ru" target="_blank">Посетите наш ресурс</a>
Как сделать ссылку на адрес электронной почты:
<a href="mailto:someone@example.com">Отправить email</a>
Как привязать к номеру телефона:
<a href="tel:+4733378901">+47 333 78 901</a>
Как сделать ссылку на другой раздел на той же странице:
<a href="#section2">Go to Section 2</a>
Как сделать ссылку на jаvascript:
<a href="jаvascript:alert('Hello World!');">Execute jаvascript</a>
Поддержка браузерами | |||||
---|---|---|---|---|---|
элемент | |||||
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.