Элемент <link – позволяет авторам связать свой документ на другие ресурсы.
Адрес ссылки задается href атрибутом. Если href атрибут присутствует, то его значение должно быть действительным непустым URL – адресом, потенциально окруженным пробелами . Должен присутствовать один или оба атрибута href или imagesrcset.
Если оба href и imagesrcset атрибуты отсутствуют, то элемент не определяет ссылку.
Обычно элемент <link> используют для подключения стилей CSS , где атрибут href указывает на (URL) таблицы стилей , а атрибут rel имеет ключевое слово (значение) stylesheet. Это ключевое слово создает ссылку на внешний ресурс, которая способствует модели обработки стиля.
<link href="main.css" rel="stylesheet">С помощью элемента <link> можно создать две категории ссылок : ссылки на внешние ресурсы и гиперссылки. Раздел типов ссылок определяет, является ли конкретный тип ссылки внешним ресурсом или гиперссылкой.
Один <link> элемент может создавать несколько ссылок (некоторые из которых могут быть ссылками на внешние ресурсы, а некоторые - гиперссылками ); какие именно и сколько ссылок будут созданы, зависит от ключевых слов, указанных в rel атрибуте.
Например: следующий элемент – <link> создает две гиперссылки на одну и ту же страницу:
<link rel="author license" href="/about">Атрибуты контента
Этот элемент включает в себя глобальные атрибуты
Атрибут – href
href – Этот атрибут определяет URL, связываемого ресурса. URL может быть абсолютным или относительным.
Атрибут – hreflang
hreflang – Этот атрибут определяет язык, связываемого ресурса. Допустимые значения определяются BCP47. Используйте этот атрибут только если присутствуют атрибуты href.
<a href="https://google.com" hreflang="en">Google</a>Атрибут – type
type – Атрибут указывает тип MIME, такое как text/html, text/css и т.д. Обычно он используется для определения типа таблицы стилей, на которую делается ссылка (например, text/css).
<style type="text/css">Атрибут – media
media – Этот атрибут указывает медиа – ресурс, который применяет связываемый ресурс. Его значение Значение должно быть допустимым списком медиа – запросов.
Атрибут – crossorigin
crossorigin – Атрибут указывает, должен ли CORS использоваться при загрузки ресурса. CORS – поддерживаемые изображения могут быть повторно использованы в элементе <canvas> не искажая их. Допустимы значения:
anonymous – Cross-origin запрос выполняется, но учётные данные не отправляются .
Недопустимое значение атрибута по умолчанию - это анонимное состояние, а его отсутствующее значение по умолчанию - состояние без CORS.
use-credentials – Cross-origin запрос выполняется вместе с отправкой учётных данных .
<script src="https://mysite/script.js" crossorigin="anonymous" >Запросы CORS не будут передавать учетные данные.
<script src="https://mysite/script.js" crossorigin="use-credentials" >Запросы CORS будут передавать учетные данные.
Атрибут – rel
rel – Этот атрибут связь между документом, содержащим гиперссылку, и целевым ресурсом. Атрибут должен быть разделённым пробелами списком значений типов ссылки.
Атрибут – sizes
sizes – Атрибут определяет размеры иконок для визуальных средств массовой информации, содержащихся в ресурсе. Его значение, если оно есть, носит рекомендательный характер. Атрибут должен быть указан только на элементы – <link>, у которых есть атрибут – rel, определяющий ключевое слово – icon, или ключевое слово – apple-touch-icon. Может иметь следующие значения:
any – Ключевое слово представляет , что ресурс содержит масштабируемую иконку, например , как это предусмотрено в векторном формате image/svg+xml.
Пробелоразделенный список размеров, каждый в формате <width in pixels>x<height in pixels> или <width in pixels>X<height in pixels>. Каждый из этих размеров должен содержаться в ресурсе.
Ключевое слово - any означает, что ресурс содержит растровый значок шириной в пиксели устройства по ширине и высотой в пиксели устройства по высоте .
Ключевые слова, указанные в атрибуте – sizes, должны представлять размеры значков, которых фактически находятся в связанном ресурсе.
<!doctype html>
<html lang="en">
<head>
<title>lsForums — Inbox</title>
<link rel=icon href=favicon.png sizes="16x16" type="image/png">
<link rel=icon href=windows.ico sizes="32x32 48x48" type="image/vnd.microsoft.icon">
<link rel=icon href=mac.icns sizes="128x128 512x512 8192x8192 32768x32768">
<link rel=icon href=iphone.png sizes="57x57" type="image/png">
<link rel=icon href=gnome.svg sizes="any" type="image/svg+xml">
<link rel=stylesheethref=lsforums.css>
<script src=lsforums.js> </script>
<meta name=application-name content="lsForums">
</head>
<body>Атрибут – as
as – Атрибут используется только для элементов <link> с атрибутом rel="preload" или rel="prefetch". Он указывает тип контента, загружаемого <link>, который необходим для определения приоритетов контента, сравнения запросов, применения корректного content security policy, и установки корректного Accept запрашиваемого заголовка.
Атрибут – color
color – Атрибут используется с типом связи – mask-icon. Атрибут должен быть указан только для элементов – <link>, у которых есть атрибут – rel, содержащий ключевое слово – mask-icon. Значение должно быть строкой, соответствующей произведению CSS <color> , определяя предлагаемый цвет, который пользователи могут использовать для настройки отображения значка, когда он закрепляет ваш сайт.
mask-icon – Ключевое слово является зарегистрированным расширением предопределенного набора типов ссылок.
<link rel="mask-icon" href="mask.svg" color="blue">Атрибут – title
title – Атрибут дает название ссылки. За одним исключением, это чисто рекомендательный характер. Значение — текст. При использовании <link rel="stylesheet"> он определяет предпочтительную или альтернативную таблицу стилей. Исключение составляют ссылки на таблицы стилей в дереве документа , для которых атрибут – title определяет наборы таблиц стилей CSS.
<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">Атрибут – disabled
disabled – Атрибут является логическим атрибутом , который используется с типом связи – stylesheet. Атрибут должен быть указан только для элементов – <link>, у которых есть атрибут – rel, содержащий ключевое слово – stylesheet. В сочетании со скриптом, этот атрибут может использоваться для включения и выключения различных отношений таблицы стилей.
disabled - Динамическое удаление атрибута, например, с помощью document.querySelector("link").removeAttribute("disabled"), вызовет и применит таблицу стилей:
<link disabled rel="alternate stylesheet" href="css/pooh">Атрибут – crossorigin
Атрибут – integrity
integrity – Содержит встроенные метаданные — криптографический хеш-код ресурса(файла) в кодировке base64, который вы сообщаете браузеру для загрузки. Браузер может использовать его для проверки, что загруженный ресурс был получен без неожиданных манипуляций. Смотрите Subresource Integrity.
Атрибут – imagesrcset
imagesrcset – Атрибут может применяться и является атрибутом srcset.
Атрибуты imagesrcset и href вместе вносят источники изображения в исходный набор, (если дескрипторы ширины не используются) .
Атрибуты imagesrcset и imagesizes должны быть указаны только для элементов – <link>, которые имеют как атрибут – rel, определяющий ключевое слово preload, так и атрибут as в состоянии "image".
Эти атрибуты позволяют предварительно загрузить соответствующий ресурс, который впоследствии используется элементом img, имеющим соответствующие значения атрибутов srcset и sizes
<link rel="preload" as="image"
imagesrcset="wolf_400px.jpg 400w, wolf_800px.jpg 800w, wolf_1600px.jpg 1600w" imagesizes="50vw">
<!-- ... Позже или, возможно, вставлен динамически ... -->
<img src="wolf.jpg" alt="A rad wolf"
srcset="wolf_400px.jpg 400w, wolf_800px.jpg 800w, wolf_1600px.jpg 1600w"
sizes="50vw">Атрибут imagesrcset можно комбинировать с атрибутом media для предварительной загрузки соответствующего ресурса, выбранного из источников элемента picture, для художественного направления :
<link rel="preload" as="image"
imagesrcset="dog-cropped-1x.jpg, dog-cropped-2x.jpg 2x"
media="(max-width: 800px)">
<link rel="preload" as="image"
imagesrcset="dog-wide-1x.jpg, dog-wide-2x.jpg 2x"
media="(min-width: 801px)">
<!-- ... later, or perhaps inserted dynamically ... -->
<picture>
<source srcset="dog-cropped-1x.jpg, dog-cropped-2x.jpg 2x"
media="(max-width: 800px)">
<img src="dog-wide-1x.jpg" srcset="dog-wide-2x.jpg 2x"
alt="An awesome dog">
</picture>Интерфейс DOM
[Exposed=Window]
interface HTMLLinkElement : HTMLElement {
[HTMLConstructor] constructor();
[CEReactions] attribute USVString href;
[CEReactions] attribute DOMString? crossOrigin;
[CEReactions] attribute DOMString rel;
[CEReactions] attribute DOMString as; // (default "")
[SameObject, PutForwards=value] readonly attribute DOMTokenList relList;
[CEReactions] attribute DOMString media;
[CEReactions] attribute DOMString integrity;
[CEReactions] attribute DOMString hreflang;
[CEReactions] attribute DOMString type;
[SameObject, PutForwards=value] readonly attribute DOMTokenList sizes;
[CEReactions] attribute USVString imageSrcset;
[CEReactions] attribute DOMString imageSizes;
[CEReactions] attribute DOMString referrerPolicy;
[CEReactions] attribute boolean disabled;
// also has obsolete members
};
HTMLLinkElement includes LinkStyle;По материалам
Спецификации