html中link标签的属性总结

Html中Link

link是html外部资源链接元素，规定了当前文档与外部资源的关系

---

常用场景

1. 链接一个外部的样式表

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

2. 创建站点图标

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

   扩展用法：指定rel="apple-touch-icon"，当在ios设备上使用添加到主屏按钮将网站添加到主屏幕上时，会使用该指定的图标资源作为添加到主屏上的图标。

   <link rel="apple-touch-icon" sizes="114x114" href="apple-icon-114.png" type="image/png">

   <link rel="apple-touch-icon" sizes="72x72" href="apple-icon-114.png" type="image/png">

   <link rel="apple-touch-icon-precomposed" sizes="57x57" href="apple-icon-114.png" type="image/png">

   不同设备会自动选用相对应的sizes属性的图标，系统会自动对设置的图标添加圆角和高光，如果不想用该效果，可以将apple-touch-icon改为apple-touch-icon-precomposed

3. 提供了media属性，可以根据不同的媒体条件加载不同的资源

   <link href="print.css" rel="stylesheet" media="print">

   <link href="mobile.css" rel="stylesheet" media="screen and (max- 600px)">

4. rel属性设置preload、prefetch预加载提升页面加载性能，crossorigin属性设置是否使用CORS请求提供安全特性

   <link rel="preload" href="myFont.woff2" as="font" type="font/woff2" crossorigin="anonymous">

属性

• rel

  命名链接文档和当前文档的关系，常用值有下

  1. dns-prefetch
     提示浏览器该资源需要在用户点击链接之前进行DNS查询和协议握手

  2. icon
     定义代表页面的资源图标，media，type和sizes属性允许浏览器选择其上下文中最合适的图标.如果多种资源符合条件，浏览器会选择最后一个

  3. modulepreload
     更早和更高优先级的加载模块依赖脚本，可以极大提高大型依赖树的解析请求效率。

     <link rel="modulepreload" href="lib.mjs">

     <script type="module" src="main.mjs"></script>

     // main.mjs

     import { func } from './lib.mjs'

  4. preload
     使浏览器预加载当前页面所需的脚本、样式等文件，而不是等到解析script和link标签时才加载。可以使资源更早的下载并可用，更不易阻塞页面的初步渲染，进而提升性能。实验有效，需要使用as属性指定资源类型。

     <link rel="preload" href="index.js" as="script"/>

  5. prefetch
     使浏览器预加载其他页面会用到的资源，不会在当前页面渲染时加载资源，而是利用浏览器空闲时间来下载，当进入下一页面时就直接从disk cache里面取，既不影响当前页面渲染，又提高了其他页面加载渲染的速度。实验有效，在其他页面中会显示该资源从prefetch cache中获取，不用指定as属性。

     <link rel="prefetch" href="next.js" />

  6. prerender
     建议浏览器事先获取链接的资源，并建议将预取的内容显示在屏幕外，以便在需要时可以将其快速呈现给用户，使用chrome试验没有生效。

  7. subresource
     指定当前页面最高优先级的资源，会优先加载该资源，实验发现没有效果.

     <link rel="subresource" href="styles.css">

  8. stylesheet
     定义要用作样式表的外部资源

• as

  该属性仅在<link>元素设置了 rel="preload" 时才能使用。它规定了<link>元素加载的内容的类型，对于内容的优先级、请求匹配、正确的内容安全策略的选择以及正确的 Accept 请求头的设置，这个属性是必需的。

• crossorigin

  此枚举属性指定在加载相关资源时是否必须使用 CORS. 启用 CORS 的图片 可以在 <canvas> 元素中重复使用, 并避免其被污染. 可取的值如下:

  1. anonymous
     会发起一个跨域请求(即包含 Origin: HTTP 头). 但不会发送任何认证信息 (即不发送 cookie, X.509 证书和 HTTP 基本认证信息). 如果服务器没有给出源站凭证 (不设置 Access-Control-Allow-Origin: HTTP 头), 资源就会被污染并限制使用。

  2. use-credentials
     会发起一个带有认证信息 (发送 cookie, X.509 证书和 HTTP 基本认证信息) 的跨域请求 (即包含 Origin: HTTP 头). 如果服务器没有给出源站凭证 (不设置 Access-Control-Allow-Origin: HTTP 头), 资源就会被污染并限制使用。

  3. 当不设置此属性时，资源将会不使用 CORS 加载 (即不发送 Origin: HTTP 头)，这将阻止其在 <canvas> 元素中进行使用。若设置了非法的值，则视为使用 anonymous。

• href

  此属性指定被链接资源的URL。 URL 可以是绝对的，也可以是相对的。

• importance

  指示资源的相对重要性，只有存在rel=“preload”或rel=“prefetch”时，importance属性才能用于<link>元素。 优先级提示使用以下值委托：

  1. auto 表示没有偏好。 浏览器可以使用其自己的启发式方法来确定资源的优先级。

  2. high 向浏览器指示资源具有高优先级。

  3. low 向浏览器指示资源的优先级较低。

• integrity

  是当前资源文件的哈希值，以base64编码的方式加密，这样用户能用它来验证一个获取到的资源,在传送时未被非法篡改。

• media

  这个属性规定了外部资源适用的媒体类型。它的值必须是"媒体查询"。这个属性使得用户代理能选择最适合设备运行的媒体类型。

• sizes

  这个属性定义了包含相应资源的可视化媒体中的icons的大小，它只有在rel包含icon的link类型值中生效。

• type

  这个属性被用于定义链接的内容的类型，这个属性的值应该是像text/html，text/css等MIME类型。