本文共 4038 字，大约阅读时间需要 13 分钟。

link的rel属性有很多的值，不同的值代表了外部资源与本html文档的关系。

rel属性的值可以是：

• alternate
• author
• canonical
• dns-prefetch
• external
• help
• icon
• licence
• manifest
• modulepreload
• next
• pingback
• prefetch
• preload
• prev
• search
• shortlink
• sidebar
• stylesheet
• tag

1、连接外部的样式表，这个是最常用的

<link rel="stylesheet" type="text/css" href="*.css"/>指被link链接的css文档是本文档的样式描述文件。

2、链接一个外部的icon用于浏览器的栏目图标和收藏夹图标,地址栏最前面的小图标和收藏夹图标

如图中的图标，<link rel="icon" href="/favicon.ico" >

关于rel="icon"属性，主要用途就是如上所示。但是对于IOS的图标，icon属性无效，需使用  and  。

另外rel="icon" 同时可以附加sizes="32x32"等属性，确保浏览器只会把目标图片解析成32x32的大小。当然，我们可以提供多种大小的图片，浏览器会自行选择最合适的图片。

例如：<link rel="icon" sizes="16x16" href="/favicon.ico" >

           <link rel="icon" sizes="32x32" href="/favicon.ico" >

           <link rel="icon" sizes="128x128" href="/favicon.ico" >

关于href指向的资源，图标必须是ico图片，ico图片的制作过程如下：

首先准备一张png图片，再利用在线的转换工具即可转换称为ico图片。

3、rel="alternate"可以定义另外一个版本的文档，可以是Pdf，另外一种语言，另外一种css样式，如下所示

<link rel="alternate" href="url"  >，方便了浏览器插件（例如翻译插件，下载插件）和搜索引擎的搜索。

4、rel="author license",规定一些作者和版权相关的信息。例如，

<link rel="author license" href="url"  >,url所指向的就是这些信息所在的文档。

5、rel="canonical"，用来定义一个权威的版本，保证内容的正确性。

<link rel="canonical" href="url"  >,url所指向的html文档，即使权威版本，内容更加正确，方便搜索引擎的分析。

6、rel="preconnect"或者rel="prefetch"或者rel="preload"等都是用于加快网页的一个加载速度的类型，只有部分浏览器实现了。

preconnect是告知浏览器提前连接指定的url，以便在后面需要使用该连接的时候，连接已经形成，节省了时间。

prefetch是告知浏览器立刻取来url所指向的资源，这个适用于该资源立刻需要被用户使用。

preload是告知浏览器预加载一些url指定的资源，这些资源可能立刻会被使用。

通过预加载，将一些后续需要使用的资源提前下载下来，虽然会导致一开始网页加载的时候，空白一段时间，但是却可以换来后续用户使用体验的增加，使用户在操作网页的时候，不会中途因为等待资源下载而等待。

在上面三种类型之中，preload更加适用于预加载资源。

下面将是一些preload的常用的预加载资源的方式：

preload可以预先加载如下这些资源， 并通过as属性指定如下这些资源类型，并通过type类型指定这些资源中的子资源，例如as="vedio" type="vedio/mp4"

• audio: Audio file.
• document: An HTML document intended to be embedded inside a  or .
• embed: A resource to be embedded inside an  element.
• fetch: Resource to be accessed by a fetch or XHR request, such as an ArrayBuffer or JSON file.
• font: Font file.
• image: Image file.
• object: A resource to be embedded inside an  element.
• script: JavaScript file.
• style: Stylesheet.
• track: WebVTT file.
• worker: A JavaScript web worker or shared worker.
• video: Video file.

例1：提前下载好script，之后再执行，有可以下载css，font等等

  
       
     
     
     
bouncing balls
  
     

例2：提前下载视频资源如下，（当然，还可以提前下载好图片等等，只需要as="image" type="image/png"）

8、rel属性配合media属性可根据不同的设备来下载不同的资源

  
       
     
     
     
   
    
    
My site
  
   
  

浏览器的支持

转载地址：https://blog.csdn.net/lengye7/article/details/86763608 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！