Елемент посилання зовнішнього ресурсу HTML ( <link>) визначає відносини між поточним документом і зовнішнім ресурсом. Цей елемент найчастіше використовується для посилання на {{Glossary ("CSS", "stylesheets")}}, але також використовується для встановлення значків сайтів (іконок стилів favicon і мобільного домашнього екрана / значків програм) .
Щоб пов’язати зовнішню таблицю стилів, потрібно включити <link>елемент у {{HTMLElement ("head")}} так:
<link href = "main.css" rel = "stylesheet">
Цей простий приклад надає шлях до таблиці стилів всередині hrefатрибута і relатрибут зі значенням stylesheet. Поняття rel"відносини", і, можливо, одна з ключових особливостей <link>елемента - значення позначає, як пов'язаний елемент пов'язаний з документом, що містить. Як видно з посилання на типи посилань, існує багато різних типів відносин.
Існує ряд інших поширених типів. Наприклад, посилання на значок сайту:
<link rel = "icon" href = "favicon.ico">
Існує ряд інших relзначень значків , які в основному використовуються для позначення спеціальних типів піктограм для використання на різних мобільних платформах, наприклад:
<link rel = "розмір яблуко-значка-попередній" розмір = "114x114"
href = "apple-icon-114.png" type = "image / png">
sizesАтрибут вказує розмір значків, в той час як typeмістить MIME - тип ресурсу пов'язані між собою . Вони надають корисні поради, які дозволяють браузеру вибрати найбільш доступну піктограму.
Ви також можете вказати тип або запит носія в mediaатрибуті; цей ресурс буде завантажено лише в тому випадку, якщо умова носія є істинною. Наприклад:
<link href = "print.css" rel = "stylesheet" media = "print"> <link href = "mobile.css" rel = "stylesheet" media = "екран і (max-width: 600px)
До <link>елемента також додано кілька цікавих нових функцій продуктивності та безпеки . Візьміть цей приклад:
<link rel = "preload" href = "myFont.woff2" як = "шрифт"
type = "font / woff2" crossorigin = "anonymous">
relЗначення preloadвказує на те, що браузер повинен попередньо завантажити цей ресурс (див предзагрузкі зміст з отн = "переднавантаження» для отримання більш докладної інформації), з asатрибутом , що вказує певний клас контенту, витягується. crossoriginАтрибут вказує , чи повинен ресурс бути залучена з {{Glossary("CORS")}} запитом.
Інші примітки щодо використання:
<link>Елемент може відбуватися або в {{HTMLElement("head")}} або {{HTMLElement("body")}} елемента, в залежності від того, чи має він тип зв'язку , який є тілом-ок . Наприклад, stylesheetтип зв'язку - це тіло-ok, і тому <link rel="stylesheet">дозволено в тілі. Проте, це не хороша практика; більше сенсу відокремлювати <link>елементи від вмісту тіла, розміщуючи їх у <head>.<link>для створення значка Favicon для сайту, і ваш сайт використовує політику безпеки контенту (CSP) для підвищення своєї безпеки, політика застосовується до позначки. Якщо у вас виникли проблеми з Favicon не завантажується, переконайтеся , що {{HTTPHeader("Content-Security-Policy")}} заголовка по img-srcдирективі не запобігання доступу до нього.<link>елемента, але незрозуміло, як вони будуть використовуватися.<link>вимагають слеш: <link />.nextдля relпопереднього завантаження наступної сторінки в серії документів.Цей елемент включає глобальні атрибути .
rel="preload"або rel="prefetch"було встановлено на <link>елементі. Вона визначає тип завантажуваного контенту <link>, який необхідний для визначення пріоритетів вмісту, відповідності запиту, застосування правильної політики безпеки контенту та встановлення правильного заголовка запиту {{HTTPHeader ("Accept")}}.anonymoususe-credentialsOriginзаголовком HTTP) виконується разом із відправленими обліковими даними (тобто виконується cookie, сертифікат та / або HTTP Basic аутентифікація). Якщо сервер не надає облікових даних сайту (через {{HTTPHeader ("Access-Control-Allow-Credentials")}} HTTP-заголовок), ресурс буде заплямовано і його використання буде обмежене.Originзаголовка HTTP), що запобігає його непрямому використанню. Якщо він недійсний, він обробляється так, якби було використано анонімне перераховане ключове слово . Див настройки CORS атрибути для отримання додаткової інформації.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 apple-touch-icon. Він може мати такі значення:
any, що означає, що іконку можна масштабувати до будь-якого розміру, як у векторному форматі, наприклад image/svg+xml.<width in pixels>x<height in pixels><width in pixels>X<height in pixels>Примітка. Більшість форматів піктограм можуть зберігати лише одну піктограму; тому більшу частину часу {{HTMLAttrxRef ("розміри")}} містить тільки один запис. Формат ICO MS, як і ICNS від Apple. ICO є більш повсюдним; Ви обов'язково повинні використовувати його.
titleАтрибут має спеціальну семантику на <link>елементі. При використанні на ньому <link rel="stylesheet">він визначає бажану або альтернативну таблицю стилів . Неправильне використання може призвести до ігнорування таблиці стилів .typeатрибут, але й насправді тепер рекомендується практика. Він також використовується для rel="preload"типів посилань, щоб переконатися, що браузер завантажує лише типи файлів, які він підтримує.Note: While there is no disabled attribute in the HTML standard, there is a disabled attribute on the HTMLLinkElement DOM object.
iso-8859-1.
rel attribute. Link type values for the attribute are similar to the possible values for {{HTMLAttrxRef("rel", "link")}}.Note: This attribute is considered obsolete by the WHATWG HTML living standard (which is the specification MDN treats as canonical). However, it's worth noting that rev is not considered obsolete in the W3C specification. That said, given the uncertainty, relying on rev is unwise.
Instead, you should use the {{HTMLAttrxRef("rel", "link")}} attribute with the opposite link type value. For example, to establish the reverse link for made, specify author. Also this attribute doesn't stand for "revision" and must not be used with a version number, even though many sites misuse it in this way.
The <link> element has no visual presence on a web document, therefore it has no styling considerations to worry about.
To include a stylesheet in a page, use the following syntax:
<link href="style.css" rel="stylesheet">
You can also specify alternative style sheets.
The user can choose which style sheet to use by choosing it from the View > Page Style menu. This provides a way for users to see multiple versions of a page.
<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">
You can include links to several different icons on the same page, and the browser will choose which one works best for its particular context using the rel and sizes values as hints.
<!-- 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">
You can provide a media type or query inside a media attribute; this resource will then only be loaded if the media condition is true. For example:
<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)">
You can determine when a style sheet has been loaded by watching for a load event to fire on it; similarly, you can detect if an error has occurred while processing a style sheet by watching for an error event:
<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">
Note: The load event fires once the stylesheet and all of its imported content has been loaded and parsed, and immediately before the styles start being applied to the content.
You can find a number of <link rel="preload"> examples in Preloading content with rel="preload".
| Content categories | Metadata content. If itemprop is present: flow content and phrasing content. |
|---|---|
| Permitted content | None, it is an {{Glossary("empty element")}}. |
| Tag omission | As it is a void element, the start tag must be present and the end tag must not be present |
| Permitted parents | Any element that accepts metadata elements. If itemprop is present: any element that accepts phrasing content. |
| Permitted ARIA roles | None |
| DOM interface | {{DOMxRef("HTMLLinkElement")}} |
| Specification | Status | Comment |
|---|---|---|
| {{SpecName("Preload")}} | {{Spec2("Preload")}} | Defines <link rel="preload">, and the as attribute. |
| {{SpecName("Subresource Integrity", "#HTMLLinkElement", "lt;link>")}} | {{Spec2("Subresource Integrity")}} | Added the integrity attribute. |
| {{SpecName("HTML WHATWG", "semantics.html#the-link-element", "<link>")}} | {{Spec2("HTML WHATWG")}} | No changes from latest snapshot |
| {{SpecName("HTML5 W3C", "document-metadata.html#the-link-elemen", "<link>")}} | {{Spec2("HTML5 W3C")}} | Added crossorigin and sizes attributes; extended values of media to any media queries; added numerous new values for rel. |
| {{SpecName("HTML4.01", "struct/links.html#h-12.3", "<link>")}} | {{Spec2('HTML4.01')}} | |
| {{SpecName("Resource Hints", "#prefetch", "prefetch")}} | {{Spec2("Resource Hints")}} | Added dns-prefetch, preconnect, prefetch, and prerender. |
{{Compat ("html.elements.link", 3)}}