linkЭлементы используются для связи внешнихcssТаблицы стилей и другие связанные внешние ресурсы.

link

вlinkВключены следующие свойства.

href: указать путь к файлу внешнего ресурса, то есть сообщить браузеру расположение внешнего ресурса
hreflang: указывает язык, используемый внешним ресурсом.
media: указывает, для какого устройства используется внешний ресурс.
rel: Требуется, указывает связь между текущим документом и внешними ресурсами.
sizes: указывает размер значка, только для свойствrel="icon"вступить в силу
type: Описание внешних ресурсовMIMEтипа, напримерtext/css,image/x-icon

rel

relЗначения параметров основных атрибутов следующие, вы также можете обратиться кMDN.

alternate: ссылка на альтернативную версию документации
archives: ссылки на наборы документов или исторические данные.
author: Предоставляет ссылку на автора документа.
bookmark: определяет значок закладки, который документ отображает в Избранном.
canonical: указывает каноническую версию сайта.
dns-prefetch: указывает, что браузер предварительно выполняетDNSРазобрать
external: Ссылка на внешнюю сторону, то есть для информирования поисковых систем о том, что эта ссылка не является ссылкой на этот сайт
first: ссылка на первый документ в коллекции
help: ссылка на справочную информацию
icon: определяет значок веб-сайта или веб-страницы в строке заголовка браузера.
license: ссылка на информацию об авторских правах для документа.
last: ссылка на последний документ в коллекции
nofollow: указывает, что документ не отслеживается поисковыми системами, то есть некоторые страницы не сканируются поисковыми роботами.
next: запись следующей страницы документа (браузер может загрузить эту страницу раньше времени)
noreferrer: может запретить браузеру отправлять информацию об источнике доступа
preload: предварительно загрузить ресурс
pingback: Предоставляет информацию об обработке текущего документаpingbackадрес сервера
prefetch: Предварительно загружать и кэшировать ресурсы, обычноpreloadресурс, используемый для загрузки текущей страницы, в то время какprefetchИспользуется для загрузки ресурсов, которые могут понадобиться будущим страницам
preconnect: Предварительно подключиться к адресу целевого ресурса
prev: запись предыдущей страницы документа
search: инструмент поиска, связанный с документацией.
stylesheet: указать внешний ресурс в качестве таблицы стилей.
sidebar: указывает документ, отображаемый на боковой панели браузера.
tag: укажите теги и ключевые слова, используемые в текущем документе.
up: указывает на документ, который обеспечивает контекст для этой веб-страницы.

относительное приложение

alternate

alternateМожет использоваться для темы стиль коммутации, будетcssВ качестве подготовительного шаблона,linkиспользоватьdisabledпереключить.

Преимущество в том, что браузерcssФайл предзагружен, и тема или стиль сайта переключается практически мгновенно, и пользователь этого не воспринимает, минус в том, что можно ограничиться только текущей страницей.cssПереключение, сложно сделать многостраничнымcssвыключатель.

Включено в корневой каталог следующим образомindex.html,foo.css,bar.css.

Уведомлениеtitleуправление свойствамиcssКак загружаются файлы стилей.

безtitleАтрибуты:ref=stylesheetВремяcssСтили всегда загружаются и отображаются
имеютtitleАтрибуты:ref=stylesheetВремяcssСтиль загружается и отображается как стиль по умолчанию.
имеютtitleАтрибуты:ref=alternate stylesheetВремяcssСтиль будет отображаться как подготовительный стиль, не загружаемый по умолчанию.

// index.html
<!DOCTYPE HTML>
<html>

<head>
    <link rel="stylesheet" type="text/css" href="foo.css" title="foo">
    <link rel="alternate stylesheet" type="text/css" href="bar.css" title="bar">
</head>

<body>
    <p>hello world</p>
    <button class="foo">foo</button>
    <button class="bar">bar</button>

    <script>
        var foo = document.querySelector('.foo')
        var bar = document.querySelector('.bar')

        foo.addEventListener("click", toggleTheme)
        bar.addEventListener("click", toggleTheme)

        function toggleTheme() {
            var btnClass = this.getAttribute('class')
            var links = document.querySelectorAll('link')

            links.forEach(link => {
                var linkTitle = link.getAttribute('title')

                link.disabled = true

                if (linkTitle === btnClass) {
                    link.disabled = false
                }
            })
        }
    </script>
</body>

</html>

// foo.css
p {
  color: red;
}

// bar.css
p {
  color: red;
}

За тоpcи мобильные веб-страницы,alternateПоисковым системам также выгодно предоставлять разные типы страниц для пользователей разных устройств.

pcВерсияheadДобавьте следующее, гдеhrefадрес мобильной страницы.

<link rel="alternate" media="only screen and (max-width:640px)" href="http://m.xxx.com">

МобильныйheadДобавьте следующим образом,hrefдляpcАдрес конечной страницы.

<link rel="canonical" href="http://xxx.com">

author

Указывает ссылку на автора документа.

<link rel="author" href="http://www.xxx.com">

bookmark

Значок для страницы, отображаемой в Избранном.

<link rel="bookmark" href="fav.ico">

canonical

Веб-сайт может иметь несколько разных URL-адресов, указывающих на одну и ту же веб-страницу, или дублировать веб-страницы или очень похожие веб-страницы с разными URL-адресами. Чаще всего поддерживается несколько типов устройств, и одна и та же веб-страница будет содержать несколько клиентов. .

http://www.xxx.com
http://m.www.xxx.com

Когда поисковая система включает следующие три веб-сайта одновременно, поскольку содержимое страниц трех URL-адресов одинаково, поисковая система автоматически рекомендует версию в соответствии с алгоритмом.URLотображается в результатах поиска, и этоURLВероятно, это не та версия, которую больше всего хотели показать.

http://www.xxx.com/index
http://www.xxx.com/index.html
http://www.xxx.com/index.html?id=xxx

Укажите каноническую версию веб-страницы следующим образом, и поисковая система сосредоточит вес на странице канонической версии, тем самым увеличив вес веб-страницы и повысив рейтинг.

<link rel="canonical" href="http://www.xxx.com/index">

dns-prefetch

DNS PrefetchэтоDNSТехнология предварительного разрешения: когда пользователь просматривает веб-страницу, браузер разрешает и кэширует доменное имя на веб-странице, а когда пользователь щелкает ссылку на странице,DNS, чтобы сократить время ожидания пользователя и улучшить взаимодействие с пользователем.

По умолчанию браузер предварительно разрешает доменное имя на странице, которая не находится в том же домене, что и текущая веб-страница, и кэширует результат, то есть неявно.DNSсинтаксический анализ, в то время как предварительный синтаксический анализ полей, которые не отображаются на странице, можно выполнить с помощьюlinkЭтикетка.

linkманераDNSПредварительный анализ страницы выполняется параллельно с ее загрузкой и не влияет на производительность загрузки страницы.

<link rel="dns-prefetch" href="http://www.xxx.com">

Уведомлениеdns-prefetchНельзя злоупотреблять, повторять на нескольких страницахDNSПодготовка увеличивает количество дубликатовDNSКоличество запросов.

следующее, чтобы отключить неявныеDNSПредварительный разбор.

<meta http-equiv="x-dns-prefetch-control" content="off">

external

Ссылки вовне, сообщите браузеру, что данная ссылка не является ссылкой на этот сайт.

<link rel="external" href="">

first

ссылки на первый документ в коллекции.

<link rel="first" href="">

help

Ссылки на справочную информацию.

<link rel="help" href="">

icon

определяет значок веб-сайта или веб-страницы в строке заголовка браузера.

<link rel="icon" href="favicon.ico">

license

ссылки на информацию об авторских правах документа, которая является уведомлением об авторских правах документа.

<link rel="license" href="">

last

ссылки на последний документ в коллекции.

<link rel="last" href="">

nofollow

Указанная страница не отслеживается поисковыми системами, или эта страница не просматривается поисковыми системами.

<link rel="nofollow" href="">

Если ссылка использует этот атрибут, он указывает поисковым системам не сканировать ссылку.

<a href="http://www.baidu.com" rel="nofollow"></a>

используется для записи следующей страницы документа, что может подсказать браузеру начать статьюURL, и браузер может загрузить страницу раньше времени.

<link rel="start" href="http://www.xxx.com">

noreferrer

Запрещает браузерам отправлять информацию об источнике доступа.

<link rel="noreferrer" href="">

preload

Предварительно загружать ресурсы перед рендерингом страницы, и заблокировать первоначальный рендеринг страницы непросто.

вhrefа такжеasСвойства используются для указания пути и типа загружаемого ресурса,asПосле указания типа ресурса браузер может более точно оптимизировать приоритет загрузки ресурса.

предварительно загружается следующим образомcssа такжеjsфайл, и когда страница отображается, как только этот ресурс потребуется, его можно использовать немедленно.preload.

<!DOCTYPE HTML>
<html lang="zh-CN">

<head>
    <link rel="preload" href="style.css" as="style">
    <link rel="preload" href="main.js" as="script">

    <link rel="stylesheet" href="style.css">
</head>

<body>
    <p>hello world</p>

    <script src="main.js"></script>
</body>

</html>

pingback

pingbackЭто способ, используемый в блогах для уведомления других статей о том, что они были процитированы.

например пользовательAопубликовал статьюC, то пользовательBнаписал статьюD, в котором статьяDСтатьи, цитируемые вCссылка, когда пользовательBопубликованные статьиDкогда,WordPressСистема блогов автоматически запустится со статьиDвыбирать статьиCссылку, и попробуйте добавить в статьюCизpingbackадрес для отправки сообщения.

заявляет следующееpingbackадрес.

<link rel="pingback" href="http://www.xxx.com">

prefetch

Предварительно загружает ресурсы, которые обычно используются для загрузки ресурсов, требуемых другими страницами, кроме этой страницы, чтобы ускорить скорость рендеринга первого экрана последующих страниц. После загрузки ресурса его можно кэшировать.

<link rel="prefetch" href="">

preconnect

указывает браузеру заранее открыть соединение со связанным веб-сайтом, в том числеDNSпредварительный разбор,TLSПереговоры,TCPРукопожатие, которое устраняет задержки при обмене данными и экономит время пользователей, благодаря чему связанный контент может быть получен быстрее.

<link rel="preconnect" href="">

используется для записи предыдущей страницы документа.

<link rel="prev" href="">

search

Ссылка на инструмент поиска документации, подробный справочникsearch.

<link rel="search" href="">

stylesheet

указывает внешний ресурс как таблицу стилей, если не установленоtype, браузер по умолчаниюtext/css.

<link rel="stylesheet" href="style.css">

sidebar

указывает документ, отображаемый на боковой панели браузера,HTMLудалено из спецификации, толькоFirefox63Реализовано в предыдущих версиях.

<link rel="sidebar" href="">

tag

указывает теги и ключевые слова, используемые в текущем документе.

<link rel="tag" href="">

up

Указывает на документ, который содержит контекст для этой веб-страницы.

<link rel="up" href="">

🎉 Напишите в конце

🍻Ребята, если вы это видели и считаете, что эта статья была вам полезна, ставьте лайк 👍 илиStar✨Поддержите!

Кодирование вручную, если есть ошибки, исправьте их в комментариях 💬~

Ваша поддержка — самая большая мотивация для меня обновляться💪~

GitHub,Blog,Наггетс,CSDNСинхронизированное обновление, подписывайтесь 😉~