В HTML тег link
— это самозакрывающийся элемент, обычно расположенный в head
документа. Он используется для установления связей с внешними ресурсами, такими как таблицы стилей, значки и т. д. Тег link
имеет несколько атрибутов, из которых чаще всего используются rel
и href
.
Атрибут rel
определяет связь между текущим документом и связанным ресурсом. Общие значения атрибута rel
:
stylesheet
: представляет ссылку на внешнюю таблицу стилей CSS. icon
: представляет значок, связанный с веб-сайтом, например значок. Атрибут href
используется для указания URL-адреса связанного ресурса.
Типичный пример тега link
:
<!DOCTYPE html> <html> <голова> <мета-кодировка="UTF-8"> <title>Мой сайт</title> <!-- Ссылка на внешнюю таблицу стилей CSS --> <link rel="stylesheet" href="styles.css"> <!-- Ссылка на значок веб-сайта --> <link rel="icon" href="favicon.ico"> </голова> <тело> <h1>Ссылка!</h1> <p>Это введение к ссылке. </p> </тело> </html>
В этом примере мы используем два тега link
. Первый тег link
связывает HTML-документ с внешней таблицей стилей styles.css
, которая используется для определения стиля страницы. Второй тег link
связывает HTML-документ с веб-сайтом favicon.ico
, который будет отображаться, когда пользователь откроет веб-сайт в браузере.
Конечно, у тега link
есть и другие атрибуты и варианты использования. Вот некоторые распространенные атрибуты и варианты использования:
type
: этот атрибут используется для указания типа MIME связанного ресурса. Например, при ссылке на таблицу стилей CSS вы можете указать ее тип как text/css
. В большинстве случаев браузеры могут автоматически определять типы ресурсов, поэтому атрибут type
не требуется. Пример:
<link rel="stylesheet" href="styles.css" type="text/css">
media
: этот атрибут позволяет указать, к каким типам мультимедиа применяется таблица стилей. Например, вы можете создать таблицу стилей для печати, которая будет использоваться, когда пользователи печатают страницу. Пример:
<link rel="stylesheet" href="print.css" media="print">
sizes
: при использовании тега link
для ссылки на значки разных размеров вы можете использовать атрибут sizes
, чтобы указать размер значка. Это полезно в ситуациях, когда значки отображаются в разных размерах в зависимости от устройства. Пример:
<link rel="icon" href="icon-48x48.png" size="48x48"> <link rel="icon" href="icon-96x96.png" size="96x96">
crossorigin
: при ссылке на ресурс из разных источников вы можете использовать атрибут crossorigin
, чтобы указать настройки CORS (совместное использование ресурсов из разных источников) для ресурса. Пример:
<link rel="stylesheet" href="https://link.com/styles.css" crossorigin="anonymous">
integrity
: этот атрибут используется для обеспечения целостности внешних ресурсов и может использоваться вместе с атрибутом crossorigin
. Присвоив ресурсу хэш на основе контента (например, SHA-256), вы можете гарантировать, что ресурс не был подделан. Пример:
<link rel="stylesheet" href="https://link.com/styles.css" crossorigin="anonymous" целостности="sha256-base64-encoded-hash">
preload
: rel="preload"
можно использовать для предварительной загрузки важных ресурсов, таких как шрифты, изображения или скрипты. Это оптимизирует производительность загрузки страниц. Пример:
<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>
Это некоторые общие атрибуты и способы использования тега link
.
Помимо ранее упомянутых, rel
имеет и другие значения атрибутов:
alternate
: используйте rel="alternate"
для предоставления альтернативных версий документа, например страниц на другом языке или для разных устройств. Пример:
<link rel="alternate" hreflang="es" href="https://link.com/es/a"> <link rel="alternate" media="только экран и (макс. ширина: 640 пикселей)" href="https://link.com/mobile/a">
dns-prefetch
: доменные имена могут быть предварительно разрешены с помощью rel="dns-prefetch"
, чтобы сократить время поиска DNS и ускорить загрузку ресурсов. Пример:
<link rel="dns-prefetch" href="//link.com">
preconnect
: аналогично dns-prefetch
, rel="preconnect"
может предварительно установить TCP-соединение со сторонним ресурсом, сокращая время, необходимое для установления соединения. Пример:
<link rel="preconnect" href="https://link.com">
prefetch
: используйте rel="prefetch"
для предварительной выборки и кэширования ресурсов для использования на последующих страницах. Это полезно для предварительной загрузки ресурсов, которые могут использоваться на странице. Пример:
<link rel="prefetch" href="pre-page.html">
canonical
: использование rel="canonical"
может предоставить поисковым системам канонический URL-адрес страницы, помогая избежать проблем с дублированием контента. Пример:
<link rel="canonical" href="https://link.com/a/post">
license
: используйте rel="license"
для указания URL-адреса лицензии документа. Пример:
<link rel="license" href="https://link.org/licenses/by/4.0/">
manifest
: используйте rel="manifest"
, чтобы связать файл манифеста веб-приложения (обычно в формате JSON) с документом HTML. Файл манифеста содержит метаданные веб-приложения, такие как имя, описание, значок и т. д. Пример:
<link rel="manifest" href="manifest.json">
Обратите внимание, что разные браузеры могут иметь разную степень поддержки этих свойств и функций. При использовании новых функций рекомендуется обращаться к соответствующей документации, чтобы обеспечить совместимость и функциональность.
На этом завершается статья о конкретном использовании атрибута тега ссылки в HTML. Для получения дополнительной информации об атрибуте тега ссылки HTML выполните поиск по предыдущим статьям на сайте downcodes.com или продолжайте просматривать соответствующие статьи ниже. Надеюсь, вы поддержите меня. будущее.