diff options
Diffstat (limited to 'files/ru/web/html/element/link/index.html')
| -rw-r--r-- | files/ru/web/html/element/link/index.html | 336 |
1 files changed, 336 insertions, 0 deletions
diff --git a/files/ru/web/html/element/link/index.html b/files/ru/web/html/element/link/index.html new file mode 100644 index 0000000000..ea3f78a615 --- /dev/null +++ b/files/ru/web/html/element/link/index.html @@ -0,0 +1,336 @@ +--- +title: '<link>: Элемент - ссылка на внешний ресурс' +slug: Web/HTML/Element/ссылка +tags: + - Ссылки + - загрузка + - метаданные + - предзагрузка +translation_of: Web/HTML/Element/link +--- +<div>{{HTMLRef}}</div> + +<p><strong>Элемент HTML - Ссылка на Внешний Ресурс (<code><link></code>)</strong> определяет отношения между текущим документом и внешним ресурсом. Этот элемент чаще всего используется для ссылки на {{Glossary("CSS", "stylesheets")}}, а также для создания иконок сайта (как для иконок в стиле "favicon", так и для иконок домашних экранов и приложений мобильных устройств) среди прочего.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/link.html")}}</div> + +<div class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</div> + +<p>Чтобы подключить таблицу стилей, вы должны включить элемент <code><link></code> внутри вашего {{HTMLElement("head")}} следующим образом:</p> + +<pre class="brush: html no-line-numbers notranslate"><link href="main.css" rel="stylesheet"></pre> + +<p>В этом простом примере указывается путь к таблице стилей внутри атрибута <code>href</code> и атрибут <code>rel</code> со значением <code>stylesheet</code>. <code>rel</code> означает "отношения (relationship)", и, вероятно, является одной из ключевых особенностей элемента <code><link></code> — значение сообщает как указанный элемент связан с содержащим его документом. Как вы увидете в нашем справочнике <a href="/en-US/docs/Web/HTML/Link_types">типы ссылок</a>, есть много различных видов отношений.</p> + +<p>Существует ряд других распространенных типов, с которыми вы столкнетесь. Например, ссылка на сайт иконок:</p> + +<pre class="brush: html no-line-numbers notranslate"><link rel="icon" href="favicon.ico"></pre> + +<p>Есть ряд других значений <code>rel</code> для иконок, в основном, используемых для обозначения специальных типов иконок для использования на различных мобильных платформах, например:</p> + +<pre class="brush: html no-line-numbers notranslate"><link rel="apple-touch-icon-precomposed" sizes="114x114" + href="apple-icon-114.png" type="image/png"></pre> + +<p>Атрибут <code>sizes</code> определяет размер иконки, когда <code>type</code> содержит тип MIME связанного ресурса. Они предоставляют советы, позволяющие браузеру выбрать наиболее подходящую иконку.</p> + +<p>Вы можете, также, указать медиа тип или запрос внутри атрибута <code>media</code>; этот ресурс будет загружен только в том случае, если media состояние равно true. Например:</p> + +<pre class="brush: html no-line-numbers notranslate"><link href="print.css" rel="stylesheet" media="print"> +<link href="mobile.css" rel="stylesheet" media="screen and (max-width: 600px)"></pre> + +<p>В элемент <code><link></code> также были добавлены некоторые новые интересные возможности производительности и безопасности, к примеру:</p> + +<pre class="brush: html no-line-numbers notranslate"><link rel="preload" href="myFont.woff2" as="font" + type="font/woff2" crossorigin="anonymous"></pre> + +<p>Значение <code>rel</code> - <code>preload</code> указывает, что браузер должен предварительно загрузить этот ресурс (смотрите <a href="/en-US/docs/Web/HTML/Preloading_content">Предварительная загрузка контента при помощи rel="preload"</a> для более подробной информации), атрибут <code>as</code> указывает на определенный класс загружаемого контента. Атрибут <code>crossorigin</code> указывает должен ли ресурс загружаться с помощью запроса {{Glossary("CORS")}}.</p> + +<p>Другие замечания по использованию:</p> + +<ul> + <li>Элемент <code><link></code> может присутствовать в элементах {{HTMLElement("head")}} или {{HTMLElement("body")}}, в зависимости от того, имеет ли он <a href="https://html.spec.whatwg.org/multipage/links.html#body-ok">тип ссылки</a>, являющейся <strong>body-ok</strong>. Например, ссылка типа <code>stylesheet</code> является body-ok,и, поэтому, <code><link rel="stylesheet"></code> допускается в body. Однако, это не очень хорошая практика использования; более осмысленно отделять ваши <code><link></code> от содержимого body, помещая их в <code><head></code>.</li> + <li>При использовании <code><link></code> для установки favicon сайта, и когда ваш сайт использует Политику Безопасности Контента (CSP) для повышения безопасности, политика применяется к favicon. Если вы столкнулись с проблемой при загрузке favicon, проверьте, что <a href="/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/img-src"><code>img-src</code> директива</a> заголовка {{HTTPHeader("Content-Security-Policy")}} не препятствует доступу к ней.</li> + <li>Спецификации HTML и XHTML определяют обработчики событий для элемента <code><link></code>, но не указывают как они будут использоваться.</li> + <li>В XHTML 1.0, пустые элементы, такие как <code><link></code>, требуют слеш: <code><link /></code>.</li> + <li>WebTV поддерживает использование значения <code>next</code> для <code>rel</code> в качестве предварительной загрузки следующей страницы в серии документов.</li> +</ul> + +<h2 id="Атрибуты">Атрибуты</h2> + +<p>Этот элемент включает в себя <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes">глобальные атрибуты</a>.</p> + +<dl> + <dt>{{HTMLAttrDef("as")}}</dt> + <dd>Этот атрибут используется только для элементов <code><link></code> с атрибутом <code>rel="preload"</code> или <code>rel="prefetch"</code>. Он указывает тип контента, загружаемого <code><link></code>, который необходим для определения приоритетов контента, сравнения запросов, применения корректного <a href="/en-US/docs/Web/HTTP/CSP">content security policy</a>, и установки корректного {{HTTPHeader("Accept")}} запрашиваемого заголовка.</dd> + <dt>{{HTMLAttrDef("crossorigin")}}</dt> + <dd>Этот перечисляемый атрибут указывает, должен ли {{Glossary("CORS")}} использоваться при загрузки ресурса. <a href="/en-US/docs/Web/HTML/CORS_Enabled_Image">CORS-поддерживаемые изображения</a> могут быть повторно использованы в элементе {{HTMLElement("canvas")}} не <em>искажая </em>их. Допустимы значения: + <dl> + <dt><code>anonymous</code></dt> + <dd>Сross-origin запрос (т.е. с HTTP-заголовком {{HTTPHeader("Origin")}}) выполняется, но учетные данные не отправляются (т.е. нет cookie, сертификата X.509, или базовой аутентификации HTTP). Если сервер не передал учетные данные исходному сайту (нет настроенного HTTP-заголовка {{HTTPHeader("Access-Control-Allow-Origin")}}), изображение будет искажено, а его использование ограничено.</dd> + <dt><code>use-credentials</code></dt> + <dd>Сross-origin запрос (т.е. с HTTP-заголовком <code>Origin</code>) выполняется вместе с отправкой учетных данных (т.е. выполняется аутентификация cookie, сертификата, и/или базового HTTP). Если сервер не передал учетные данные исходному сайту (через HTTP-заголовок {{HTTPHeader("Access-Control-Allow-Credentials")}}), ресурс будет искажен, а его использование ограничено.</dd> + </dl> + Если атрибут отсутствует, ресурс загружается без запроса {{Glossary("CORS")}} (т.е. без отправки HTTP-заголовка <code>Origin)</code>, предотвращая его незагрязненное использование. В случае невалидности, он обрабатывается как при использовании ключевого слова <strong>anonymous.</strong> Для получения дополнительной информации смотрите <a href="/en-US/docs/Web/HTML/CORS_settings_attributes">CORS settings attributes</a>.</dd> + <dt>{{HTMLAttrDef("href")}}</dt> + <dd>Этот атрибут определяет {{glossary("URL")}}, связываемого ресурса. URL может быть абсолютным или относительным.</dd> + <dt>{{HTMLAttrDef("hreflang")}}</dt> + <dd>Этот атрибут определяет язык, связываемого ресурса. Он является консультативным. Допустимые значения определяются <a href="https://www.ietf.org/rfc/bcp/bcp47.txt">BCP47</a>. Используйте этот атрибут только если присутствуют атрибуты {{HTMLAttrxRef("href", "a")}}.</dd> + <dt id="name-attribute">{{HTMLAttrDef("importance")}} {{Experimental_Inline}}</dt> + <dd>Указывает на относительную важность ресурса. Приоритетные подсказки передаются используя значения:</dd> + <dd> + <p><strong><code>auto</code></strong>: указывает на <strong>отсутствие предпочтений</strong>. Браузер может использовать собственную эвристику для определения приоритетов ресурсов.</p> + + <p><strong><code>high</code></strong>: указывает браузеру, что ресурс находится в <strong>высоком </strong>приоритете.</p> + + <p><strong><code>low</code></strong>: указывает браузеру, что ресурс находится в <strong>низком </strong>приоритете.</p> + + <div class="blockIndicator note"> + <p><strong>Примечание: </strong>Атрибут <code>importance</code> можно использовать только для элементов <code><link></code> с атрибутами <code>rel="preload"</code> или <code>rel="prefetch"</code>.</p> + </div> + </dd> + <dt>{{HTMLAttrDef("integrity")}} {{Experimental_Inline}}</dt> + <dd>Содержит встроенные метаданные — криптографический хеш-код ресурса(файла) в кодировке base64, который вы сообщаете браузеру для заргузки. Браузер может использовать его для проверки, что загруженный ресурс был получен без неожиданных манипуляций. Смотрите <a href="/en-US/docs/Web/Security/Subresource_Integrity">Subresource Integrity</a>.</dd> + <dt>{{HTMLAttrDef("media")}}</dt> + <dd>Этот атрибут указывает медиа, который применяет связываемый ресурс. Его значение должно быть типом медиа или <a href="/en-US/docs/Web/CSS/Media_queries">медиа-запросом</a>. Этот атрибут, в основном, полезен при связывании с внешними таблицами стилей — он позволяет пользовательскому агенту выбрать наиболее подходящее устройство для запуска. + <div class="blockIndicator note"> + <p><strong>Примечания:</strong></p> + + <ul> + <li>В HTML 4, это может быть только простой, разделенный пробелами, список литералов, описывающих медиа, т.е. <a href="/en-US/docs/Web/CSS/@media">media типы и группы</a>, которые определены и допустимы в качестве значений для этого атрибута, такие как <code>print</code>, <code>screen</code>, <code>aural</code>, <code>braille</code>. HTML5 распространил это на любые <a href="/en-US/docs/Web/CSS/Media_queries">медиа-запросы</a>, которые являются расширенным набором допустимых значений HTML 4.</li> + <li>Браузеры, не поддерживающие <a href="/en-US/docs/Web/CSS/Media_queries">CSS3 Media Queries</a>, могут не распознать соответствующую ссылку; не забудьте установить резервные ссылки, ограниченные набором медиа-запросов, определенным в HTML 4.</li> + </ul> + </div> + </dd> + <dt>{{HTMLAttrDef("referrerpolicy")}} {{Experimental_Inline}}</dt> + <dd>Строка, указывающая какой реферер использовать при загрузки ресурсов: + <ul> + <li><code>no-referrer</code> означает, что заголовок {{HTTPHeader("Referer")}} не будет отправлен.</li> + <li><code>no-referrer-when-downgrade</code> означает, что заголовок {{HTTPHeader("Referer")}} не будет отправлен при переходе к источнику без TLS (HTTPS). Это поведение пользовательского агента по умолчанию, если не указано иное.</li> + <li><code>origin</code> означает, что реферером будет источник, который соответствует схеме, хосту и порту.</li> + <li><code>origin-when-cross-origin</code> означает, что навигация к другим источникам будет ограничена схемой, хостом, портом, в то время как навигация по одному и тому же источнику будет включать путь реферер .</li> + <li><code>unsafe-url</code> означает, что в качестве источника ссылки будет указываться источник и путь (но не фрагмент, пароль или имя пользователя). Этот вариант небезопасен, потому что он может способствовать утечки источников и путей из TLS-защищенных ресурсов в незащищенные источники.</li> + </ul> + </dd> + <dt>{{HTMLAttrDef("rel")}}</dt> + <dd>Этот атрибут определяет отношения связываемого документа и текущего документа. Атрибут должен быть разделенным пробелами списком <a href="/en-US/docs/Web/HTML/Link_types">значений типов ссылки</a>.</dd> + <dt>{{HTMLAttrDef("sizes")}}</dt> + <dd>Этот атрибут определяет размеры иконки для визуальных медиа, содержщихся в ресурсе. Он должен быть представлен только, если {{HTMLAttrxRef("rel", "link")}} содержит значение <code>icon</code> или нестандартный тип, например <code>apple-touch-icon</code> Apple. Может иметь следующие значения: + <ul> + <li><code>any</code>, означает, что иконка может быть маштабируема до любого размера, например в векторном формае <code>image/svg+xml</code>.</li> + <li>пробелоразделенный список размеров, каждый в формате <code><em><width in pixels></em>x<em><height in pixels></em></code> или <code><em><width in pixels></em>X<em><height in pixels></em></code>. Каждый из этих размеров должен содержаться в ресурсе.</li> + </ul> + + <div class="blockIndicator note"> + <p><strong>Примечание: </strong>Большинство форматов иконок могут хранить только одну иконку, поэтому чаще всего {{HTMLAttrxRef("sizes")}} содержит только одну запись. MS's ICO формат, как и Apple's ICNS. ICO более распространены; вы должны использовать их.</p> + </div> + </dd> + <dt>{{HTMLAttrDef("title")}}</dt> + <dd>Атрибут <code>title</code> имеет особое значение для элемента <code><link></code>. При использовании <code><link rel="stylesheet"></code> он определяет <a href="/en-US/docs/Web/CSS/Alternative_style_sheets">предпочтительную или альтернативную таблицу стилей</a>. Неверное использование может стать <a href="/en-US/docs/Correctly_Using_Titles_With_External_Stylesheets">причиной игнорирования таблицы стилей</a>.</dd> + <dt>{{HTMLAttrDef("type")}}</dt> + <dd>Этот атрибут используется для определения типа связываемого контента. Значение атрибута должно быть типом MIME, такое как <strong>text/html</strong>, <strong>text/css и т.д</strong>. Обычно он используется для определения типа таблицы стилей, на которую делается ссылка (например, <strong>text/css</strong>), но, учитывая, что CSS является единственным языком таблиц стилей, используемым в сети, этот атрибут может быть пропущен, что является рекомендацией. Он также используется для типов ссылок <code>rel="preload"</code>, чтобы браузер загружал только те типы файлов, которые он поддерживает.</dd> +</dl> + +<h3 id="Нестандартные_атрибуты">Нестандартные атрибуты</h3> + +<dl> + <dt>{{HTMLAttrDef("disabled")}} {{Non-standard_Inline}}</dt> + <dd>Этот атрибут используется для отключения отношения ссылки. В сочетании со скриптом, этот атрибут может использоваться для включения и выключения различных отношений таблицы стилей. + <div class="blockIndicator note"> + <p><strong>Примечание: </strong>Хотя в стандарте HTML нет атрибута <code>disabled</code>, атрибут <code>disabled</code> есть в объекте DOM <code>HTMLLinkElement</code>.</p> + </div> + </dd> + <dt>{{HTMLAttrDef("methods")}} {{Non-standard_Inline}}</dt> + <dd>Значение этого атрибута предоставляет информацию о функциях, которые могут выполняться над объектом. Значения обычно задаются протоколом HTTP, когда он используется, но может быть (аналогично атрибуту <strong>title</strong>) полезно заранее включить в ссылку консультативную информацию. Например, браузер может выбрать другое отображение ссылки в зависимости от указанных методов; то, что доступно для поиска может получить другую иконку, или внешняя ссылка может отображаться с указанием перехода с текущего сайта. Этот атрибут не совсем понятен и не поддерживается, даже определяющим браузером, Internet Explorer 4.</dd> + <dt>{{HTMLAttrDef("prefetch")}} {{Non-standard_Inline}} {{secureContext_inline}}</dt> + <dd>Этот атрибут идентифицирует ресурс, который может потребоваться при следующей навигации, и необходимость получить его пользовательским агентом. Это позволяет пользовательскому агенту быстрее реагировать, когда, в будущем, ресурс будет запрошен.</dd> + <dt>{{HTMLAttrDef("target")}} {{Non-standard_Inline}}</dt> + <dd>Определяет название фрейма или окна, которое определяет связывающие отношения, или, которое будет показывать рендеринг любого связываемого ресурса.</dd> +</dl> + +<h3 id="Устаревшие_атрибуты">Устаревшие атрибуты</h3> + +<dl> + <dt>{{HTMLAttrDef("charset")}} {{Obsolete_Inline}}</dt> + <dd>Этот атрибут определяет кодировку символов связываемого ресурса. Значение представляет собой список наборов символов, разделенный пробелами и/или запятыми, как определено в {{rfc(2045)}}. Значение по умолчанию <code>iso-8859-1</code>. + <div class="note"><strong>Примечание по использованию:</strong> Для получения эффекта использования данного устаревшего атрибута, используйте HTTP-заголовок {{HTTPHeader("Content-Type")}} на связываемый ресурс.</div> + </dd> + <dt>{{HTMLAttrDef("rev")}} {{Obsolete_Inline}}</dt> + <dd> + <p><span lang="ru">Значение этого атрибута показывает отношение текущего документа к связываемому документу, как определено атрибутом</span> {{HTMLAttrxRef("href", "link")}}. <span lang="ru">Этот атрибут, таким образом, определяет обратную связь по сравнению со значением атрибута </span><code>rel</code><span lang="ru">. </span><a href="/en-US/docs/Web/HTML/Link_types">Значения типов ссылки </a><span lang="ru">для атрибута аналогичны возможным значениям для</span> {{HTMLAttrxRef("rel", "link")}}.</p> + + <div class="blockIndicator note"> + <p><strong>Примечание:</strong> Этот атрибут считается устаревшим жизненным стандартом WHATWG HTML (который является каноничной спецификацией MDN). Однако, стоит отметить, что <code>rev</code> <em>не</em> считается устаревшим в спецификации W3C. Стоит сказать, учитывая неопределенность, полагаться на <code>rev</code> не стоит.</p> + </div> + </dd> + <dd> + <div class="blockIndicator note"> + <p>Взамен, вы должны использовать атрибут {{HTMLAttrxRef("rel", "link")}} с противоположным <a href="/en-US/docs/Web/HTML/Link_types">значением типов ссылки</a>. Например, чтобы установить обратную ссылку для <code>made</code>, укажите <code>author</code>.Также, этот атрибут не означает "ревизия" и не должен использоваться с номером версии, даже если многие сайты используют его в этих целях.</p> + </div> + </dd> +</dl> + +<h2 id="Стилизация_с_CSS">Стилизация с CSS</h2> + +<p>Элемент <code><link></code> не имеет визуального представления в веб-документе, поэтому он не должен стилизоваться.</p> + +<h2 id="Примеры">Примеры</h2> + +<h3 id="Включение_таблицы_стилей">Включение таблицы стилей</h3> + +<p>Включение таблицы стилей на страницы имеет следующий синтаксис:</p> + +<pre class="brush: html no-line-numbers notranslate"><link href="style.css" rel="stylesheet"> +</pre> + +<h3 id="Предоставление_альтернативных_таблиц_стилей">Предоставление альтернативных таблиц стилей</h3> + +<p>Вы можете указать <a href="/en-US/docs/Web/CSS/Alternative_style_sheets">альтернативные таблицы стилей</a>.</p> + +<p>Пользователь может выбрать, какую таблицу стилей использовать, выбрав ее в меню Вид > Стиль страницы. Это позволяет пользователям видеть мультиверсию страницы.</p> + +<pre class="brush: html no-line-numbers notranslate"><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"> +</pre> + +<h3 id="Предоставление_иконок_для_различных_контекстов_использования">Предоставление иконок для различных контекстов использования</h3> + +<p>Вы можете включить ссылки на несколько различных иконок на одной странице, и браузер выберет, какая из них лучше подходит для его конкретного контекста, используя значения <code>rel</code> и <code>sizes</code> как подсказки.</p> + +<pre class="brush: html no-line-numbers notranslate"><!-- 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"></pre> + +<h3 id="Условная_загрузка_ресурсов_с_медиазапросами">Условная загрузка ресурсов с медиазапросами</h3> + +<p>Вы можете предоставить тип медиа или запрос внутри атрибута <code>media</code>; этот ресурс будет загружен только в том случае, если условия медиа равно true. Например:</p> + +<pre class="brush: html no-line-numbers notranslate"><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)"> +</pre> + +<h3 id="События_загрузки_таблицы_стилей">События загрузки таблицы стилей</h3> + +<p>Вы можете определить, когда таблица стилей была загружена, наблюдая за событием <code>load</code>, запускающимся в нем; аналогично, вы можете обнаружить, произошла ли ошибка при обработки таблицы стилей, наблюдая за событием <code>error</code>:</p> + +<pre class="brush: html notranslate"><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"> +</pre> + +<div class="blockIndicator note"> +<p><strong>Примечание:</strong> Событие <code>load</code> запускается после загрузки и анализа таблицы стилей и всего импортируемого содержимого, непосредственно перед тем, как стили будут применены к содержимому.</p> +</div> + +<h3 id="Preload_примеры">Preload примеры</h3> + +<p>Вы можете найти примеры <code><link rel="preload"></code> в <a href="/en-US/docs/Web/HTML/Preloading_content">Preloading content with <code>rel="preload"</code></a>.</p> + +<h2 id="Техническое_резюме">Техническое резюме</h2> + +<table class="properties"> + <tbody> + <tr> + <th><a href="/en-US/docs/Web/HTML/Content_categories">Каталоги контента</a></th> + <td>Контент метаданных. Если есть <a href="/en-US/docs/Web/HTML/Global_attributes/itemprop">itemprop</a>: <a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">потоковый контент</a> и <a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">фразовый контент</a>.</td> + </tr> + <tr> + <th>Разрешенный контент</th> + <td>Нет, это {{Glossary("empty element")}}.</td> + </tr> + <tr> + <th>Tag omission</th> + <td>Так как это пустой элемент, присутствовать должен начальный тэг, конечный - отсутствует.</td> + </tr> + <tr> + <th>Разрешенные родители</th> + <td>Любой элемент, принимающий элементы метаданных. Если есть <a href="/en-US/docs/Web/HTML/Global_attributes/itemprop">itemprop</a>: любой элемент, принимающий <a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">фразовый контент</a>.</td> + </tr> + <tr> + <th scope="row">Разрешенные ARIA роли</th> + <td>Нет</td> + </tr> + <tr> + <th>DOM интерфейс</th> + <td>{{DOMxRef("HTMLLinkElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Спецификация</th> + <th scope="col">Статус</th> + <th scope="col"> + <p class="syntaxbox">Комментарий</p> + </th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("Preload")}}</td> + <td>{{Spec2("Preload")}}</td> + <td>Определены <code><link rel="preload"></code>, и атрибут<code>as</code>.</td> + </tr> + <tr> + <td>{{SpecName("Subresource Integrity", "#HTMLLinkElement", "lt;link>")}}</td> + <td>{{Spec2("Subresource Integrity")}}</td> + <td>Добавлен атрибут <code>integrit</code>.</td> + </tr> + <tr> + <td>{{SpecName("HTML WHATWG", "semantics.html#the-link-element", "<link>")}}</td> + <td>{{Spec2("HTML WHATWG")}}</td> + <td>Нет изменений, в сравнении с последней версией</td> + </tr> + <tr> + <td>{{SpecName("HTML5 W3C", "document-metadata.html#the-link-elemen", "<link>")}}</td> + <td>{{Spec2("HTML5 W3C")}}</td> + <td>Добавлены атрибуты <code>crossorigin</code> и <code>sizes</code>; расширены значения <code>media</code> для любых медиазапросов; добавлены многочисленные новые значения для <code>rel</code>.</td> + </tr> + <tr> + <td>{{SpecName("HTML4.01", "struct/links.html#h-12.3", "<link>")}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName("Resource Hints", "#prefetch", "prefetch")}}</td> + <td>{{Spec2("Resource Hints")}}</td> + <td>Добавлены <code>dns-prefetch</code>, <code>preconnect</code>, <code>prefetch</code> и <code>prerender</code>.</td> + </tr> + </tbody> +</table> + +<h2 id="Поддержка_браузерами">Поддержка браузерами</h2> + + + +<p>{{Compat("html.elements.link", 3)}}</p> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<ul> + <li>{{HTTPHeader("Link")}} HTTP header</li> + <li><a href="https://pie.gd/test/script-link-events/">Ryan Grove's <script> and <link> node event compatibility chart</a></li> +</ul> |