link标签应放在head中，通常用于引入css、图标等外部资源；1. rel定义资源关系，如stylesheet、icon、preload、prefetch；2. href指定资源url；3. type标明mime类型；4. media控制应用的媒体条件；5. sizes用于图标尺寸；6. crossorigin处理跨域请求；preload用于当前页必需资源，prefetch用于预加载未来可能需要的资源；最佳实践是将link标签置于head中以确保资源优先加载，避免页面重绘，特殊情况下可放body但可能导致闪烁。
link标签，简单来说，就是HTML里引入外部资源的钥匙。它让你的网页能用上CSS样式表、网站图标，甚至是一些预加载的资源。
解决方案
<link>标签主要用于定义当前文档与外部资源之间的关系。它是一个空元素，只能包含属性。
基本用法：
<link rel="stylesheet" href="style.css">
这个例子是最常见的，它告诉浏览器，
style.css是一个样式表，应该用来渲染当前页面。
rel属性定义了当前文档与被链接资源之间的关系，
href属性则指定了资源的URL。
核心属性：
-
rel
: 这个属性至关重要，它定义了链接的关系。常用的值包括：stylesheet
: 链接的是样式表。icon
: 链接的是网站图标（favicon）。preload
: 预加载资源，提升页面加载速度。prefetch
: 预取资源，为用户可能访问的页面做准备。alternate
: 定义文档的备用版本，例如不同语言的版本。
-
href
: 指定链接资源的URL。可以是相对路径或绝对路径。 -
type
: 指定链接资源的MIME类型。虽然不是必须的，但建议添加，可以帮助浏览器更快地识别资源类型。例如：type="text/css"
。 -
media
: 指定链接资源应用的媒体类型。例如，media="screen"
表示只在屏幕上应用，media="print"
表示只在打印时应用。 -
sizes
: 用于rel="icon"
，指定图标的尺寸。例如，sizes="32x32"
。 -
crossorigin
: 用于处理跨域资源请求。常见的取值有anonymous
和use-credentials
。
实际案例：
-
引入CSS样式表：
<link rel="stylesheet" href="css/style.css" type="text/css"> <link rel="stylesheet" href="https://cdn.example.com/bootstrap.min.css" type="text/css">
第一个例子引入了项目内部的样式表，第二个例子引入了CDN上的Bootstrap样式表。
-
设置网站图标：
<link rel="icon" href="favicon.ico" type="image/x-icon"> <link rel="icon" href="favicon.png" type="image/png" sizes="32x32">
这里定义了网站的favicon，可以是
.ico
格式，也可以是.png
格式。sizes
属性指定了图标的尺寸。 -
预加载字体：
<link rel="preload" href="fonts/myfont.woff2" as="font" type="font/woff2" crossorigin>
使用
preload
可以提前加载字体文件，避免页面出现字体闪烁（FOIT）或字体替换（FOUT）的问题。注意as
属性要指定资源类型，crossorigin
属性用于处理跨域字体。 -
针对不同屏幕尺寸应用不同的样式表：
<link rel="stylesheet" media="screen and (max-width: 600px)" href="small-screen.css"> <link rel="stylesheet" media="screen and (min-width: 601px)" href="large-screen.css">
使用
media
属性可以根据屏幕尺寸应用不同的样式表，实现响应式设计。
link标签的
rel属性还有很多其他的取值，比如
dns-prefetch、
preconnect、
modulepreload等等，它们分别用于DNS预解析、预连接和模块预加载，可以进一步优化页面加载性能。
rel="preload" vs rel="prefetch"， 什么时候用？
preload和
prefetch都是用来优化页面加载的，但它们的使用场景略有不同。
preload用于预加载当前页面需要的资源，而
prefetch用于预取将来可能需要的资源。
简单来说，如果某个资源在当前页面渲染过程中是必须的，那么就用
preload。如果某个资源在当前页面不是必须的，但用户将来很可能会访问到，那么就用
prefetch。
例如，当前页面需要用到某个字体文件，那么就应该使用
preload：
<link rel="preload" href="fonts/myfont.woff2" as="font" type="font/woff2" crossorigin>
如果用户点击某个链接后会跳转到另一个页面，而这个页面需要用到某个图片，那么就可以使用
prefetch：
<link rel="prefetch" href="images/next-page-image.jpg" as="image">
使用
preload可以提高当前页面的加载速度，而使用
prefetch可以提高用户浏览体验，减少页面切换时的等待时间。但是，过度使用
prefetch可能会浪费用户的带宽，所以需要谨慎使用。
link标签放在head里还是body里？有什么区别？
通常情况下，
<link>标签应该放在
<head>标签里。这是因为浏览器在渲染页面之前需要先解析HTML文档，如果
<link>标签放在
<body>里，浏览器可能会在渲染过程中才发现需要加载外部资源，导致页面重新渲染，影响用户体验。
将
<link>标签放在
<head>里，可以确保浏览器在渲染页面之前就加载好所有需要的外部资源，避免页面重新渲染。
但是，在某些特殊情况下，也可以将
<link>标签放在
<body>里。例如，如果某个样式表只在页面的某个特定区域使用，那么就可以将
<link>标签放在这个区域的
<body>里。这样做可以减少初始加载的资源量，提高页面加载速度。不过，这种做法可能会导致页面出现闪烁，所以需要谨慎使用。
总的来说，最佳实践是将
<link>标签放在
<head>里，除非有特殊的需求才考虑放在
<body>里。
