link标签必须放在head里才能生效，浏览器仅在解析head阶段识别其资源引入指令；若置于body中，css不加载、preload被忽略、fouc必然发生，且rel属性漏写或错误将导致静默失效。
LINK标签必须放在head里才能生效
浏览器解析HTML时，<link> 标签只有在 内才会被正确识别为资源引入指令。如果误塞进 ，多数情况下虽不报错，但CSS不会加载、预加载失效、甚至导致FOUC（Flash of Unstyled Content）。
-
<link rel="stylesheet" href="style.css">放在开头？样式会延迟应用，且可能被后续内联样式覆盖 -
<link rel="preload" as="font">放在 body？浏览器直接忽略，network面板里看不到该请求 - 部分现代框架（如Vue SFC）支持
<style></style>或<link>在 template 中动态插入，但这是JS驱动的，和原生HTML结构无关
rel属性决定LINK的实际作用类型
rel 不是可选装饰项，它定义了当前文档与目标资源的关系，直接影响浏览器行为。写错或漏写，资源就“挂名不干活”。
-
rel="stylesheet"：唯一能触发CSS解析和渲染阻塞的值；写成rel="css"或留空 → 文件下载但不解析 -
rel="preload"：需搭配as（如as="script"、as="image"），否则浏览器无法优化优先级，等同于普通<link> -
rel="prefetch"：仅用于低优先级后台预取，不能替代preload；用在首屏关键资源上反而拖慢主流程 -
rel="icon"：路径错误或未指定type（如type="image/x-icon"）时，favicon 可能不显示，尤其在 Safari 中更敏感
href路径错误是LINK失效最常见原因
相对路径计算基于当前HTML文档URL，不是当前 <link> 所在行位置。开发时容易因目录嵌套深、构建工具重写路径而踩坑。
- 假设HTML在
/blog/post.html，写href="css/main.css"→ 请求路径是/blog/css/main.css，不是项目根目录下的/css/main.css - 使用
href="/css/main.css"（绝对路径）更可靠，但注意：若部署在子路径（如https://example.com/myapp/），需配合<base href="/myapp/">，否则 404 - Vite / Webpack 构建后，CSS文件名带hash（如
main.a1b2c3.css），硬编码href="main.css"必然 404 —— 必须由构建工具注入真实路径
多个LINK标签的加载顺序影响渲染性能
浏览器按 <link> 在 中出现的顺序发起请求，且对 rel="stylesheet" 存在渲染阻塞链。顺序乱了，轻则白屏延长，重则样式错乱。
- CSS应尽可能前置：把
rel="stylesheet"放在所有<script></script>之前，避免JS执行阻塞样式表下载 - 关键CSS（如重置、布局）放前面；非关键（如主题色、动画）可
rel="stylesheet" media="(prefers-reduced-motion)"懒加载 -
rel="preload"应放在对应资源实际被用到的位置之前（比如在<script src="app.js"></script>前 preload 它依赖的某个字体），否则可能被丢弃 - 不要用
<link rel="stylesheet" href="a.css"> <link rel="stylesheet" href="b.css">依赖层叠顺序 —— CSS优先级由选择器决定，不是引入顺序
实际项目里，<link> 看似简单，但路径、rel、位置、顺序四个点任意一个出错，都会让资源“静默失败”。调试时先看Network面板有没有发出请求，再查Response是否200，最后确认浏览器是否真正应用了该资源 —— 很多时候问题不在代码写法，而在你没意识到它根本没加载成功。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
