В 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 или продолжайте просматривать соответствующие статьи ниже. Надеюсь, вы поддержите меня. будущее.