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-width: 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试验没有⽣效。
href标签怎么用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类型。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。