Url html: Тег | htmlbook.ru - Блог сумасшедшего сисадмина

Содержание

HTML тег link

Тег <link> определяет ссылку на внешний ресурс. Наиболее часто этот тег используется для подключения файла стилей CSS к документу HTML.

Использование тега <link> для подключения внешнего файла стилей CSS поддерживается всеми основными браузерами. Ничего другое в настоящее время не поддерживается.

Тег <link> является пустым элементом, который содержит только атрибуты.

Тег <link> используется только внутри элемента <head>. Он может быть использован сколько угодно раз.

Разница между HTML 4.01 и HTML5

Некоторые атрибуты, допустимые в HTML 4.01, не поддерживаются в HTML5.

В HTML5 был добавлен атрибут sizes.

Различия между HTML и XHTML

В HTML тег <link> — одиночный элемент без закрывающего тега. В XHTML тег <link> необходимо закрывать должным образом, а именно — <link />.

Атрибуты тега <link>

Атрибут	Описание
charset	Определяет кодировку символов подключаемого документа
href	Определяет URL подключаемого внешнего ресурса
hreflang	Определяет язык подключаемого внешнего документа
media	Определяет устройства вывода, для которых оптимизирован внешний ресурс
rel	Определяет отношение между текущим и подключаемым внешним документом/ресурсом
rev	Определяет отношение с подключаемым документом/ресурсом
sizes	Определяет размер иконки
target	Определяет, куда будет загружаться подключаемый документ
type	Определяет медиа-тип подключаемого документа

Общие атрибуты

Тег <link> поддерживает общие атрибуты и атрибуты-события.

CSS стили по умолчанию

Большинство браузеров будут отображать тег <link> со следующими стилями

link {
    display: none;
}

HTML пример использования

Подключение внешнего файла стилей:

<head>
   <link rel="stylesheet" type="text/css" href='theme.css'>
</head>

⚡️ HTML и CSS с примерами кода

Тег <link> (от англ. link — ссылка, связь) устанавливает связь с внешним документом вроде файла со стилями или со шрифтами.

Элемент <link> обычно размещается внутри контейнера <head> и не создаёт ссылку, в отличие от элемента <a>.

Метаданные документа

base
link
meta
style
title

Синтаксис

<head>
  <link href="<адрес>" />
</head>

Закрывающий тег не требуется.

Атрибуты

href: Путь к связываемому файлу.
media: Определяет устройство, для которого следует применять стилевое оформление.
rel: Определяет отношения между текущим документом и файлом, на который делается ссылка.
sizes: Указывает размер иконок для визуального отображения.
type: MIME-тип данных подключаемого файла.

Также для этого элемента доступны универсальные атрибуты.

href

Путь к файлу, на который делается ссылка.

Синтаксис

<link href="<адрес>" />

Значения

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

Значение по умолчанию

Нет.

media

Определяет устройство, для которого следует применять стилевое оформление. Это позволяет сделать разный стиль для отображения документа на экране монитора и при его печати.

Допускается писать несколько значений через запятую.

Синтаксис

<link media="all | print | screen | speech" />

Значения

all: Все устройства.
print: Печатающее устройство вроде принтера.
screen: Экран монитора.
speech: Речевые синтезаторы, а также программы для воспроизведения текста вслух. Сюда же входят речевые браузеры.

В HTML5 в качестве значений могут быть указаны медиа-запросы.

Значение по умолчанию

all

rel

Атрибут rel определяет отношения между текущим документом и файлом, на который делается ссылка. Это необходимо, чтобы браузер знал, как использовать подключаемый документ.

Синтаксис

<link rel="<тип>" />

Значения

alternate: Альтернативный тип, используется, к примеру, для указания ссылки на файл в формате XML для описания ленты новостей, анонсов статей.
author: Указывает ссылку на автора текущего документа или статьи.
help: Указывает ссылку на контекстно-зависимую справку.
icon: Адрес картинки, которая символизирует текущий документ или сайт.
license: Сообщает, что основное содержание текущего документа распространяется по лицензии, описанной в указанном документе.
next: Сообщает, что текущий документ является частью связанных между собой документов, а ссылка указывает на следующий документ.
prefetch: Указывает на предварительно кэшированный ресурс текущей страницы или сайта целиком.
prev: Сообщает, что текущий документ является частью связанных между собой документов, а ссылка указывает на предыдущий документ.
search: Указывает ссылку на ресурс, который применяется для поиска по документу или сайту.
stylesheet: Определяет, что подключаемый файл хранит таблицу стилей (CSS).

Значение по умолчанию

Нет.

sizes

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

Синтаксис

<link rel="icon" />
<link
  rel="icon"
  any"
/>

Значения

Вначале указывается ширина иконки в пикселах без указания единиц (например, 16), затем пишется латинская буква x в верхнем (X) или нижнем регистре (x), после чего идёт высота иконки. Если в файле хранится сразу несколько иконок, можно задавать их размеры через пробел. Ключевое слово any указывает, что иконка может масштабироваться в любой размер, к примеру, если она хранится в векторном формате SVG.

Значение по умолчанию

Нет.

type

Сообщает браузеру, какой MIME-тип данных используется для внешнего документа. Как правило, применяется для того, чтобы указать, что подключаемый файл содержит CSS.

Синтаксис

<link type="<MIME-тип>" />

Значения

Имя MIME-типа в любом регистре. Для подключаемых таблиц связанных стилей применяется тип text/css.

Значение по умолчанию

text/css

Спецификации

Preload, определение <link rel="preload">
Subresource Integrity, определение атрибута integrity
WHATWG HTML Living Standard
HTML 5
HTML 4.01 Specification
Resource Hints, определение dns-prefetch, preconnect, prefetch и prerender

Описание и примеры

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>LINK</title>
    <link rel="stylesheet" href="ie. css" />
    <link
      rel="alternate"
      type="application/rss+xml"
      title="Статьи с сайта xsltdev.ru"
      href="http://xsltdev.ru/rss.xml"
    />
    <link
      rel="shortcut icon"
      href="http://xsltdev.ru/favicon.ico"
    />
  </head>
  <body>
    <p>...</p>
  </body>
</html>

Ссылки

Тег <link> ^{MDN (рус.)}

Цвета ссылок HTML

❮ Предыдущая Далее ❯

HTML-ссылка отображается другим цветом в зависимости от был ли он посещен, не посещен или активен.

Цвета ссылок HTML

По умолчанию ссылка выглядит так (во всех браузерах):

Непосещенная ссылка подчеркнута и окрашена в синий цвет
Посещенная ссылка подчеркнута и окрашена в фиолетовый цвет
Активная ссылка подчеркнута и окрашена в красный цвет

Вы можете изменить цвета состояния ссылки с помощью CSS:

Пример

Здесь непросмотренная ссылка будет зеленой без подчеркивания. Посещенная ссылка будет розовым без подчеркивания. Активная ссылка будет выделена желтым цветом и подчеркнута. Кроме того, при наведении мыши на ссылку (a:hover) она станет красной и подчеркнутой:

<стиль>
a:link {
  цвет: зеленый;
  background-color: прозрачный;
  украшение текста: нет;
}

a:посетили {
цвет: розовый;
background-color: прозрачный;
текстовое оформление: нет;
}

a:hover {
цвет: красный;
background-color: прозрачный;
text-decoration: подчеркивание;
}

a:active {
цвет: желтый;
background-color: прозрачный;
оформление текста: подчеркивание;
}

Попробуйте сами »

Кнопки ссылок

Ссылку также можно оформить как кнопку с помощью CSS:

Это ссылка