The link element is used to link external CSS stylesheets and other relevant external resources.

1 link

Link contains the following attributes.

  • href: indicates the path to the external resource file, which tells the browser the location of the external resource
  • hreflang: Specifies the language used by external resources
  • media: Indicates the device for which external resources are used
  • rel: Mandatory, indicating the relationship between the current document and external resources
  • sizes: Specifies the size of the icon, for attributes onlyrel="icon"To take effect
  • type: Specifies external resourcesMIMEType, such astext/css,image/x-icon

2 rel

Parameter values of rel core attributes are as follows, also refer to MDN.

  • alternate: Links to alternate versions of documents
  • archives: Links to document sets or historical data
  • author: provides links to document authors
  • bookmark: Defines the bookmark icon for a document to display in favorites
  • canonical: Specifies the version of the specification for the site
  • dns-prefetch: specifies that the browser preexecutes the target resourceDNSparsing
  • external: Link to external, that is, to inform the search engine, this link is not this site link
  • first: links to the first document in the collection
  • help: Links to help information
  • icon: Defines the icon of a website or web page in the browser title bar
  • license: Links to the copyright information of the document
  • last: links to the last document in the collection
  • nofollow: Specifies that documents are not tracked by search engines, that is, certain pages are not crawled
  • next: Record the next page of the document (browsers can load this page in advance)
  • noreferrer: Prevents the browser from sending access source information
  • preload: Preloads resources
  • pingback: provides for processing the current documentpingbackServer address
  • prefetch: Preloads and caches resources, usuallypreloadResources used to load the current page, whileprefetchUsed to load resources that may be needed for future pages
  • preconnect: Preconnects to the address of the target resource
  • prev: Records the next page of the document
  • search: search tool that links to documents
  • stylesheet: Specifies the external resource to be used as the stylesheet
  • sidebar: Specifies the document to display in the browser sidebar
  • tag: Specifies the label and keyword used in the current document
  • up: points to a document that provides the context for the page

3 application rel

3.1 alternate

Alternate can be used for theme style switching, with CSS as a preparatory style, by using disabled on link.

Its advantage is because the browser preloads the CSS file in advance, the site theme or style switch is almost instantaneous, the user has no perception, the disadvantage is only limited to the CSS switch in the current page, it is difficult to do multi-page CSS switch.

The following root directories include index. HTML, foo. CSS, and bar.css.

Note that the title property controls how the CSS style file is loaded.

  • There is notitleProperties:ref=stylesheetwhencssStyles are always loaded and rendered
  • There aretitleProperties:ref=stylesheetwhencssThe style is loaded and rendered as the default style
  • There aretitleProperties:ref=alternate stylesheetwhencssStyles are rendered as preparatory styles and are not loaded by default
// 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: blue; }Copy the code

For PC and mobile web pages, Alternate also helps search engines to provide different types of pages for users on different devices.

Add the following to the PC version of head, where href is the mobile page address.

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

Add the following to the head on the mobile end, href is the page address on the PC end.

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

3.2 archives

Links to a collection of documents that describe historical records, documents, or other material of historical significance, etc.

<link rel="archives" href="https://www.xxx.com">
Copy the code

3.3 the author

A link that identifies the author of the document.

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

3.4 a bookmark

The icon that the page displays in favorites.

<link rel="bookmark" href="fav.ico">
Copy the code

3.5 canonical

A site is likely to have multiple different urls pointing to the same page, or duplicate or very similar pages on different urls. It is common to have multiple clients on the same page in order to support multiple device types.

http://www.xxx.com
http://m.www.xxx.com
Copy the code

When the search engine includes the following three websites at the same time, because the page contents of the three websites are the same, the search engine will automatically recommend a version of URL to display in the search results according to the algorithm, which may not be the most desired version.

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

According to the following way to specify the standard version of the web page, the search engine will focus on the weight of the standard version of the page, so as to enhance the weight of the page, ranking more advanced.

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

3.6 the DNS – prefetch

DNS Prefetch is a DNS pre-resolution technology. When a user browses a web page, the browser resolves the domain name in the web page. When a user clicks a link on the web page, the DNS Prefetch is not performed, reducing the user waiting time and improving user experience.

By default, the browser preresolves domain names that are not in the same domain as the current web page and caches the result, that is, the implicit DNS resolution. For domain names that do not appear on the page, the link tag is used to preresolve the domain name.

The pre-resolution of DNS in Link mode is processed in parallel with page loading and does not affect page loading performance.

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

Caution Dns-prefetch cannot be abused. Repeated DNS prefetch on multiple pages increases the number of repeated DNS queries.

You can disable implicit DNS preresolution as follows.

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

3.7 external

Link to external, inform the browser that this link is not a link to this site.

<link rel="external" href="">
Copy the code

3.8 the first

Link to the first document in the collection.

<link rel="first" href="">
Copy the code

3.9 help

Link to help information.

<link rel="help" href="">
Copy the code

3.10 the icon

Defines the icon of a web site or web page in the browser title bar.

<link rel="icon" href="favicon.ico">
Copy the code

3.11 license

A link to a document’s copyright information, the document’s copyright notice.

<link rel="license" href="">
Copy the code

3.12 the last

Link to the last document in the collection.

<link rel="last" href="">
Copy the code

3.13 nofollow

Specifies that the page is not tracked by search engines, or that the page is not crawled by search engines.

<link rel="nofollow" href="">
Copy the code

If a link uses this property, it tells the search engine not to crawl the link.

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

3.14 next

Used to record the next page of the document, prompting the browser for the starting URL of the article, and allowing the browser to load the page ahead of time.

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

3.15 noreferrer

Prevents browsers from sending access source information.

<link rel="noreferrer" href="">
Copy the code

3.16 preload

Resources are preloaded before the page is rendered and do not block the initial rendering of the page.

The href and AS attributes are used to specify the path and type of the loaded resource. After the type of the loaded resource is specified, the browser can optimize the loading priority of the resource more accurately.

The CSS and JS files are preloaded below and can be used as soon as they are needed for page rendering. See Preload for details.

<! 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>Copy the code

3.17 pingback

Pingback is a way for blogs to notify other posts that have been cited.

For example, user A posts an article C, and then user B writes A piece of article D, in which the link of article C is quoted in article D. When user B posts article D, the WordPress blogging system will automatically pick out the link of article C from article D and try to send A message to the pingback address of article C.

The pingback address of the page is declared below.

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

3.18 prefetch

Preloading resources is usually used to load resources that are not required by this page to speed up the first screen rendering of subsequent pages. After the resource is loaded, it can be cached.

<link rel="prefetch" href=""> 
Copy the code

3.19 preconnect

Telling the browser to open connections to linked sites ahead of time, including DNS pre-resolution, TLS negotiation, and TCP handshake, eliminates round-trip latency and saves the user time for faster subsequent retrieval of link content.

<link rel="preconnect" href=""> 
Copy the code

3.20 prev

Used to record the previous page of a document.

<link rel="prev" href=""> 
Copy the code

3.21 the search

Link to document search tool, refer to search for details.

<link rel="search" href="">
Copy the code

3.22 stylesheet

Specifies an external resource for the stylesheet. If type is not set, the browser defaults to text/ CSS.

<link rel="stylesheet" href="style.css">
Copy the code

3.23 the sidebar

Specifies the document to be displayed in the browser sidebar, removed from the HTML specification and implemented only by versions prior to Firefox63.

<link rel="sidebar" href="">
Copy the code

3.24 the tag

Specifies the label, keyword used for the current document.

<link rel="tag" href="">
Copy the code

3.25 the up

Points to a document that provides the context for this web page.

<link rel="up" href="">
Copy the code