--- title: ': Элемент - ссылка на внешний ресурс' slug: Web/HTML/Element/link tags: - Ссылки - загрузка - метаданные - предзагрузка translation_of: Web/HTML/Element/link original_slug: Web/HTML/Element/ссылка ---
Элемент HTML - Ссылка на Внешний Ресурс (<link>
) определяет отношения между текущим документом и внешним ресурсом. Этот элемент чаще всего используется для ссылки на {{Glossary("CSS", "stylesheets")}}, а также для создания иконок сайта (как для иконок в стиле "favicon", так и для иконок домашних экранов и приложений мобильных устройств) среди прочего.
Чтобы подключить таблицу стилей, вы должны включить элемент <link>
внутри вашего {{HTMLElement("head")}} следующим образом:
<link href="main.css" rel="stylesheet">
В этом простом примере указывается путь к таблице стилей внутри атрибута href
и атрибут rel
со значением stylesheet
. rel
означает "отношения (relationship)", и, вероятно, является одной из ключевых особенностей элемента <link>
— значение сообщает как указанный элемент связан с содержащим его документом. Как вы увидите в нашем справочнике типы ссылок, есть много различных видов отношений.
Существует ряд других распространённых типов, с которыми вы столкнётесь. Например, ссылка на сайт иконок:
<link rel="icon" href="favicon.ico">
Есть ряд других значений rel
для иконок, в основном, используемых для обозначения специальных типов иконок для использования на различных мобильных платформах, например:
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="apple-icon-114.png" type="image/png">
Атрибут sizes
определяет размер иконки, когда type
содержит тип MIME связанного ресурса. Они предоставляют советы, позволяющие браузеру выбрать наиболее подходящую иконку.
Вы можете, также, указать медиа тип или запрос внутри атрибута media
; этот ресурс будет загружен только в том случае, если media состояние равно true. Например:
<link href="print.css" rel="stylesheet" media="print"> <link href="mobile.css" rel="stylesheet" media="screen and (max-width: 600px)">
В элемент <link>
также были добавлены некоторые новые интересные возможности производительности и безопасности, к примеру:
<link rel="preload" href="myFont.woff2" as="font" type="font/woff2" crossorigin="anonymous">
Значение rel
- preload
указывает, что браузер должен предварительно загрузить этот ресурс (смотрите Предварительная загрузка контента при помощи rel="preload" для более подробной информации), атрибут as
указывает на определённый класс загружаемого контента. Атрибут crossorigin
указывает должен ли ресурс загружаться с помощью запроса {{Glossary("CORS")}}.
Другие замечания по использованию:
<link>
может присутствовать в элементах {{HTMLElement("head")}} или {{HTMLElement("body")}}, в зависимости от того, имеет ли он тип ссылки, являющейся body-ok. Например, ссылка типа stylesheet
является body-ok,и, поэтому, <link rel="stylesheet">
допускается в body. Однако, это не очень хорошая практика использования; более осмысленно отделять ваши <link>
от содержимого body, помещая их в <head>
.<link>
для установки favicon сайта, и когда ваш сайт использует Политику Безопасности Контента (CSP) для повышения безопасности, политика применяется к favicon. Если вы столкнулись с проблемой при загрузке favicon, проверьте, что img-src
директива заголовка {{HTTPHeader("Content-Security-Policy")}} не препятствует доступу к ней.<link>
, но не указывают как они будут использоваться.<link>
, требуют слеш: <link />
.next
для rel
в качестве предварительной загрузки следующей страницы в серии документов.Этот элемент включает в себя глобальные атрибуты.
<link>
с атрибутом rel="preload"
или rel="prefetch"
. Он указывает тип контента, загружаемого <link>
, который необходим для определения приоритетов контента, сравнения запросов, применения корректного content security policy, и установки корректного {{HTTPHeader("Accept")}} запрашиваемого заголовка.anonymous
use-credentials
Origin
) выполняется вместе с отправкой учётных данных (т.е. выполняется аутентификация cookie, сертификата, и/или базового HTTP). Если сервер не передал учётные данные исходному сайту (через HTTP-заголовок {{HTTPHeader("Access-Control-Allow-Credentials")}}), ресурс будет искажён, а его использование ограничено.Origin)
, предотвращая его незагрязненное использование. В случае невалидности, он обрабатывается как при использовании ключевого слова anonymous. Для получения дополнительной информации смотрите CORS settings attributes.auto
: указывает на отсутствие предпочтений. Браузер может использовать собственную эвристику для определения приоритетов ресурсов.
high
: указывает браузеру, что ресурс находится в высоком приоритете.
low
: указывает браузеру, что ресурс находится в низком приоритете.
Примечание: Атрибут importance
можно использовать только для элементов <link>
с атрибутами rel="preload"
или rel="prefetch"
.
Примечания:
print
, screen
, aural
, braille
. HTML5 распространил это на любые медиавыражения, которые являются расширенным набором допустимых значений HTML 4.no-referrer
означает, что заголовок {{HTTPHeader("Referer")}} не будет отправлен.no-referrer-when-downgrade
означает, что заголовок {{HTTPHeader("Referer")}} не будет отправлен при переходе к источнику без TLS (HTTPS). Это поведение пользовательского агента по умолчанию, если не указано иное.origin
означает, что реферером будет источник, который соответствует схеме, хосту и порту.origin-when-cross-origin
означает, что навигация к другим источникам будет ограничена схемой, хостом, портом, в то время как навигация по одному и тому же источнику будет включать путь реферер .unsafe-url
означает, что в качестве источника ссылки будет указываться источник и путь (но не фрагмент, пароль или имя пользователя). Этот вариант небезопасен, потому что он может способствовать утечки источников и путей из TLS-защищённых ресурсов в незащищённые источники.icon
или нестандартный тип, например apple-touch-icon
Apple. Может иметь следующие значения:
any
, означает, что иконка может быть масштабируема до любого размера, например в векторном формате image/svg+xml
.<width in pixels>x<height in pixels>
или <width in pixels>X<height in pixels>
. Каждый из этих размеров должен содержаться в ресурсе.Примечание: Большинство форматов иконок могут хранить только одну иконку, поэтому чаще всего {{HTMLAttrxRef("sizes")}} содержит только одну запись. MS's ICO формат, как и Apple's ICNS. ICO более распространены; вы должны использовать их.
title
имеет особое значение для элемента <link>
. При использовании <link rel="stylesheet">
он определяет предпочтительную или альтернативную таблицу стилей. Неверное использование может стать причиной игнорирования таблицы стилей.rel="preload"
, чтобы браузер загружал только те типы файлов, которые он поддерживает.Примечание: Хотя в стандарте HTML нет атрибута disabled
, атрибут disabled
есть в объекте DOM HTMLLinkElement
.
iso-8859-1
.
Значение этого атрибута показывает отношение текущего документа к связываемому документу, как определено атрибутом {{HTMLAttrxRef("href", "link")}}. Этот атрибут, таким образом, определяет обратную связь по сравнению со значением атрибута rel
. Значения типов ссылки для атрибута аналогичны возможным значениям для {{HTMLAttrxRef("rel", "link")}}.
Примечание: Этот атрибут считается устаревшим жизненным стандартом WHATWG HTML (который является каноничной спецификацией MDN). Однако, стоит отметить, что rev
не считается устаревшим в спецификации W3C. Стоит сказать, учитывая неопределённость, полагаться на rev
не стоит.
Взамен, вы должны использовать атрибут {{HTMLAttrxRef("rel", "link")}} с противоположным значением типов ссылки. Например, чтобы установить обратную ссылку для made
, укажите author
.Также, этот атрибут не означает "ревизия" и не должен использоваться с номером версии, даже если многие сайты используют его в этих целях.
Элемент <link>
не имеет визуального представления в веб-документе, поэтому он не должен стилизоваться.
Включение таблицы стилей на страницы имеет следующий синтаксис:
<link href="style.css" rel="stylesheet">
Вы можете указать альтернативные таблицы стилей.
Пользователь может выбрать, какую таблицу стилей использовать, выбрав её в меню Вид > Стиль страницы. Это позволяет пользователям видеть мультиверсию страницы.
<link href="default.css" rel="stylesheet" title="Default Style"> <link href="fancy.css" rel="alternate stylesheet" title="Fancy"> <link href="basic.css" rel="alternate stylesheet" title="Basic">
Вы можете включить ссылки на несколько различных иконок на одной странице, и браузер выберет, какая из них лучше подходит для его конкретного контекста, используя значения rel
и sizes
как подсказки.
<!-- third-generation iPad with high-resolution Retina display: --> <link rel="apple-touch-icon-precomposed" sizes="144x144" href="favicon144.png"> <!-- iPhone with high-resolution Retina display: --> <link rel="apple-touch-icon-precomposed" sizes="114x114" href="favicon114.png"> <!-- first- and second-generation iPad: --> <link rel="apple-touch-icon-precomposed" sizes="72x72" href="favicon72.png"> <!-- non-Retina iPhone, iPod Touch, and Android 2.1+ devices: --> <link rel="apple-touch-icon-precomposed" href="favicon57.png"> <!-- basic favicon --> <link rel="icon" href="favicon32.png">
Вы можете предоставить тип медиа или запрос внутри атрибута media
; этот ресурс будет загружен только в том случае, если условия медиа равно true. Например:
<link href="print.css" rel="stylesheet" media="print"> <link href="mobile.css" rel="stylesheet" media="all"> <link href="desktop.css" rel="stylesheet" media="screen and (min-width: 600px)"> <link href="highres.css" rel="stylesheet" media="screen and (min-resolution: 300dpi)">
Вы можете определить, когда таблица стилей была загружена, наблюдая за событием load
, запускающимся в нем; аналогично, вы можете обнаружить, произошла ли ошибка при обработки таблицы стилей, наблюдая за событием error
:
<script> var myStylesheet = document.querySelector('#my-stylesheet'); myStylesheet.onload = function() { // Do something interesting; the sheet has been loaded } myStylesheet.onerror = function() { console.log("An error occurred loading the stylesheet!"); } </script> <link rel="stylesheet" href="mystylesheet.css" id="my-stylesheet">
Примечание: Событие load
запускается после загрузки и анализа таблицы стилей и всего импортируемого содержимого, непосредственно перед тем, как стили будут применены к содержимому.
Вы можете найти примеры <link rel="preload">
в Preloading content with rel="preload"
.
Каталоги контента | Контент метаданных. Если есть itemprop: потоковый контент и фразовый контент. |
---|---|
Разрешённый контент | Нет, это {{Glossary("empty element")}}. |
Tag omission | Так как это пустой элемент, присутствовать должен начальный тэг, конечный - отсутствует. |
Разрешённые родители | Любой элемент, принимающий элементы метаданных. Если есть itemprop: любой элемент, принимающий фразовый контент. |
Разрешённые ARIA роли | Нет |
DOM интерфейс | {{DOMxRef("HTMLLinkElement")}} |
{{Compat("html.elements.link", 3)}}