HTML
Связывание ресурсов
Поиск…
Вступление
Хотя многие скрипты, значки и таблицы стилей могут быть написаны прямо в разметке HTML, лучше всего использовать эти ресурсы в своем собственном файле и связывать их с вашим документом. В этом разделе рассматриваются ссылки на внешние ресурсы, такие как таблицы стилей и сценарии, в HTML-документ.
Синтаксис
-
<link rel="link-relation" type="mime-type" href="url"> -
<script src="path-to-script"></script>
параметры
| атрибут | подробности |
|---|---|
charset | Задает кодировку символов связанного документа |
crossorigin | Указывает, как элемент обрабатывает запросы на кросс-поиск |
href | Задает местоположение связанного документа |
hreflang | Указывает язык текста в связанном документе |
media | Определяет, на каком устройстве будет отображаться связанный документ, который часто используется при выборе таблиц стилей на основе соответствующего устройства |
rel | Требуется . Задает связь между текущим документом и связанным документом |
rev | Задает взаимосвязь между связанным документом и текущим документом |
sizes | Задает размер связанного ресурса. Только когда rel="icon" |
target | Указывает, где должен быть загружен связанный документ |
type | Задает тип носителя связанного документа |
integrity | Задает хэш-код с кодировкой base64 (sha256, sha384 или sha512) связанного ресурса, что позволяет браузеру проверить его легитимность. |
Внешняя таблица стилей CSS
<link rel="stylesheet" href="path/to.css" type="text/css">
Стандартная практика заключается в размещении тегов CSS <link> внутри <head> в верхней части вашего HTML. Таким образом, CSS будет загружен первым и будет применяться к вашей странице по мере ее загрузки, вместо того, чтобы показывать неустановленный HTML до загрузки CSS. Атрибут type не нужен в HTML5, потому что HTML5 обычно поддерживает CSS.
<link rel="stylesheet" href="path/to.css" type="text/css">
а также
<link rel="stylesheet" href="path/to.css">
... сделать то же самое в HTML5.
Другой, хотя и менее распространенной практикой, является использование оператора @import внутри прямого CSS. Как это:
<style type="text/css">
@import("path/to.css")
</style>
<style>
@import("path/to.css")
</style>
JavaScript
синхронный
<script src="path/to.js"></script>
Стандартная практика заключается в размещении тегов JavaScript <script> непосредственно перед закрывающим </body> . Загрузка последних скриптов позволяет визуальным эффектам вашего сайта появляться быстрее и не позволяет вашему JavaScript работать с элементами, которые еще не загружены.
Асинхронный
<script src="path/to.js" async></script>
Другой вариант, когда загружаемый Javascript-код не нужен для инициализации страницы, он может быть загружен асинхронно, что ускоряет загрузку страницы. Используя async браузер будет загружать содержимое скрипта параллельно и, как только он будет полностью загружен, прервет разбор HTML, чтобы проанализировать файл Javascript.
Отложенный
<script src="path/to.js" defer></script>
Отложенные сценарии похожи на сценарии асинхронного программирования, за исключением того, что синтаксический анализ будет выполняться только после полного анализа HTML. Отложенные сценарии гарантированно загружаются в порядке объявления, так же как и синхронные скрипты.
<NoScript>
<noscript>JavaScript disabled</noscript>
Элемент <noscript> определяет контент, который будет отображаться, если пользователь отключил сценарии или браузер не поддерживает использование скриптов. Тег <noscript> может быть помещен либо в <head> либо в <body> .
Favicon
<link rel="icon" type="image/png" href="/favicon.png">
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
Используйте mime-type image/png для файлов PNG и image/x-icon для файлов с иконкой ( *.ico ). Разницу см. В этом вопросе SO .
Файл с именем favicon.ico в корневом каталоге вашего сайта обычно загружается и применяется автоматически, без необходимости использовать <link> . Если этот файл когда-либо изменится, браузеры могут быть медленными и упрямыми в обновлении своего кеша.
Альтернативный CSS
<link rel="alternate stylesheet" href="path/to/style.css" title="yourTitle">
Некоторые браузеры позволяют применять альтернативные таблицы стилей, если они предлагаются. По умолчанию они не будут применяться, но обычно они могут быть изменены через настройки браузера:
Firefox позволяет пользователю выбирать таблицу стилей с помощью подменю «Вид»> «Стиль страницы», Internet Explorer также поддерживает эту функцию (начиная с IE 8), также доступную из меню «Вид»> «Стиль страницы» (по крайней мере, с IE 11), но для Chrome требуется расширение используйте функцию (начиная с версии 48). Веб-страница также может предоставить собственный пользовательский интерфейс, чтобы пользователь мог переключать стили.
(Источник: Документы MDN )
Веб-фид
Используйте атрибут rel="alternate" чтобы обеспечить возможность обнаружения ваших фидов Atom / RSS.
<link rel="alternate" type="application/atom+xml" href="http://example.com/feed.xml" />
<link rel="alternate" type="application/rss+xml" href="http://example.com/feed.xml" />
См. Документы MDN для RSS-каналов и Atomic RSS .
Связать атрибут «media»
<link rel="stylesheet" href="test.css" media="print">
Media указывает, какую таблицу стилей следует использовать для какого типа носителя. Использование значения print будет отображать только эту таблицу стилей для страниц печати.
Значение этого атрибута может быть любым из значений mediatype (аналогично запросу в формате CSS).
Пред. И далее
Например, если страница является частью серии статей, можно использовать prev и next для указания страниц, которые появляются до и после.
<link rel="prev" href="http://stackoverflow.com/documentation/java/topics">
<link rel="next" href="http://stackoverflow.com/documentation/css/topics">
Совет ресурсов: dns-prefetch, prefetch, prerender
Preconnect
Отношение preconnect аналогично dns-prefetch в том, что оно разрешит DNS. Тем не менее, он также будет выполнять рукопожатие TCP и опциональное согласование TLS. Это экспериментальная функция.
<link rel="preconnect" href="URL">
DNS-Prefetch
Сообщает обозревателям, чтобы разрешить DNS для URL-адреса, чтобы все активы с этого URL загружались быстрее.
<link rel="dns-prefetch" href="URL">
Prefetch
Сообщает обозревателям, что данный ресурс должен быть предварительно загружен, чтобы его можно было загружать быстрее.
<link rel="prefetch" href="URL">
DNS-Prefetch разрешает только имя домена, тогда как prefetch загружает / сохраняет указанные ресурсы.
Предварительно обрабатывать
Сообщает обозревателям, чтобы они извлекали и отображали URL-адрес в фоновом режиме, чтобы они могли мгновенно доставляться пользователю, когда пользователь переходит к этому URL-адресу. Это экспериментальная функция.
<link rel="prerender" href="URL">