link 标签是 html 中声明文档与外部资源关系的唯一标准空元素，必须位于 内，其 rel 属性决定浏览器如何处理资源，不同 rel 值行为差异显著，位置错误或值误用将导致预加载失效、图标不显示等问题。
link 标签不是“引入 CSS 的方式之一”，它是 HTML 中定义当前文档与外部资源关系的唯一标准空元素，且必须出现在 内。
它不负责执行加载逻辑，而是声明“我需要这个资源”，由浏览器根据 rel 值决定如何处理——比如预加载、预连接、设为图标，或应用为样式表。
link 必须写在
- 浏览器只在解析
阶段收集link声明，用于早期资源发现（如 preload、preconnect） - 如果误写在
，多数浏览器会容忍（尤其rel="stylesheet"），但：-
rel="preload"或rel="preconnect"可能被完全忽略 -
rel="icon"在部分 Safari 版本中不生效 - W3C 验证失败，CI/CD 流水线可能报错
-
- 它是空元素：HTML 中写成
<link rel="stylesheet" href="a.css">即可；XHTML 要求自闭合，如<link rel="stylesheet" href="a.css">
rel 值决定行为，不是所有值都等价
同一个 link 标签，rel 不同，用途天差地别：
-
rel="stylesheet"：触发 CSS 解析阻塞渲染，是唯一能影响页面样式的link类型 -
rel="preload"：提前拉取资源（如字体、关键 JS），但不执行，需配合as属性才有效 -
rel="preconnect"：建立 DNS + TCP + TLS 连接，适用于跨域 CDN，但滥用会挤占主域连接数 -
rel="icon"：声明网站图标，sizes属性仅在此时有意义（如sizes="16x16 32x32"） -
rel="dns-prefetch"：仅做 DNS 查询，开销最小，适合低优先级域名
注意：rel="import" 已被废弃多年，rel="alternate" 在现代项目中基本只用于 RSS 或多语言切换，不用于样式。
和 @import 混用会出问题，尤其首屏性能
-
link是 HTML 级并行加载，浏览器可同时发起多个请求 -
@import是 CSS 规则，只能写在 CSS 文件或<style></style>块内，且强制串行加载（A.css @import B.css → B 必须等 A 解析完才开始下载） - 后者极易引发 FOUC（Flash of Unstyled Content），尤其在慢网或高延迟下
- 构建工具（如 Vite、Webpack）无法静态分析
@import，导致 CSS 提取、Tree-shaking 失效 - 若你看到某 CSS 文件开头有
@import url("reset.css");，应把它改成独立的<link rel="stylesheet" href="reset.css">
link 表面上简单，但真正难的是理解每个 rel 值背后对应的浏览器调度机制。写错一个 rel 或放错位置，可能让预加载变成无效请求，或让图标在 iOS 上彻底消失——这些都不是报错能告诉你的。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
