必须放在内，否则浏览器流式解析时会先渲染无样式dom，导致fouc（闪白、字体跳变、布局抖动）、移动端首屏错位及ssr hydration失败。
link标签必须放在里，否则页面会闪一下
浏览器解析 HTML 是自上而下流式进行的，<link rel="stylesheet"> 放在 里，等于告诉浏览器“先画 DOM，CSS 慢点来”。结果就是 FOUC：文字先用默认字体蹦出来，再跳成你设的字体；按钮位置偏移一次；媒体查询压根不触发。
移动端尤其明显——字体加载延迟、布局抖动、首屏内容错位。SSR 场景（如 Next.js）更麻烦： 外的 <link> 导致服务端渲染的样式上下文缺失，hydration 直接失败。
-
<link>必须是的直接子元素，别嵌套在<script></script>或<meta>里 - 顺序建议：
<title></title>→<link rel="stylesheet">→ 其他<script></script> - 别用 JS 动态插入
<link>来“优化”，那只是把 FOUC 变成可预期的闪屏
rel="stylesheet" 缺失或大小写错误 = 样式静默失效
浏览器只靠 rel 值决定是否启动 CSS 解析流程。rel="stylesheet" 是 HTML5 规范唯一认可的标识，漏掉、拼错、大小写不对（比如 rel="StyleSheet"），<link> 就退化为普通链接：Network 面板能看到 200，Elements 面板 Styles 栏却空空如也，控制台也不报错。
- 错误写法：
<link href="style.css">、<link rel="preload" as="style" href="style.css"> - 正确写法只有这一种核心组合：
<link rel="stylesheet" href="style.css"> -
type="text/css"已冗余，现代浏览器默认就是它，写了纯属多占字节
href 路径写错，90% 是相对路径算错了基准
href 的计算基准永远是当前 HTML 文件的 URL，不是编辑器打开的目录，也不是服务器根路径。写 href="css/style.css" 在 /blog/article.html 中，实际请求的是 /blog/css/style.css，而非你想要的 /css/style.css。
- 开发时快速验证：右键页面源码里的
href值 → “在新标签页中打开”，看能否直接显示 CSS 内容 - Network 面板里找 404 请求，点开看 “Initiator” 列，直接定位到哪个
<link>发起的 - 推荐统一用根相对路径：
href="/css/style.css"（开头带/），避免嵌套层级带来的歧义 - 本地双击打开
file://协议时，相对路径可能被浏览器安全策略拦截，务必用live-server或vite preview测试
多个 CSS 文件加载顺序直接影响样式覆盖和首屏性能
CSS 加载是串行阻塞的：浏览器按 <link> 出现顺序依次下载、解析、构建 CSSOM。后加载的 CSS 规则可覆盖前面同选择器的声明，但顺序错乱会导致意料外的样式丢失或重绘。
- 推荐顺序：重置类（如
normalize.css）→ 框架（如bootstrap.min.css）→ 自定义样式（custom.css） - 非关键 CSS（如打印样式、暗色主题）用
media属性隔离：<link rel="stylesheet" href="print.css" media="print">，它仍会下载，但不参与初始渲染 - HTTP/2 下多个小 CSS 文件影响不大，但
@import在 CSS 文件里套 CSS 会强制串行加载，拖慢首屏，应避免
真正容易被忽略的不是语法对错，而是路径基准、rel 大小写、以及多个 <link> 之间那种看不见的依赖关系——它们共同决定了用户第一眼看到的是什么。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
