必须放在内且为直接子元素，否则必然触发fouc、hydration失败或图标模糊；其顺序决定css加载与覆盖行为，后加载的同权重规则无条件覆盖前者。
<link> 必须全部放在 内，且顺序直接影响样式加载、覆盖行为与首屏渲染稳定性。放错位置或乱序，不是“可能出问题”，而是必然触发 FOUC、hydration 失败或图标模糊。
为什么 <link rel="stylesheet"> 必须在
浏览器流式解析 HTML，遇到 <link rel="stylesheet"> 就会阻塞渲染，直到 CSSOM 构建完成。如果它被写在 里，等于告诉浏览器：“先画 DOM，CSS 稍后再来”——结果就是文字闪一下、按钮跳一次、媒体查询不生效。SSR 场景（如 Next.js）更严重： 外的 <link> 不参与服务端样式注入，hydration 直接失败。
-
<link>必须是的直接子元素，不能包在<script></script>、<meta>或其他标签里 -
rel="stylesheet"必须小写，拼错（如StyleSheet）或漏掉，该标签就退化为普通链接：Network 显示 200，Elements 的 Styles 面板却为空 - 动态用 JS 插入
<link>≠ 优化，只是把不可控的 FOUC 变成可预期的闪屏
<link> 在
顺序不是“建议”，而是渲染引擎的确定性规则：从上到下依次下载、解析、注入 CSSOM，后加载的同权重规则无条件覆盖前面的。
-
<title></title>→<link rel="stylesheet">（基础重置、变量、工具类）→ 其他<link>→<script></script>（非 defer/async） - 基础样式（如
reset.css、vars.css）必须最靠前，否则后续样式依赖的 :root 变量或 normalize 行为可能失效 - 页面级样式（
page.css）居中，组件库样式（antd.css）靠后，但别指望靠顺序“自动覆盖”——显式提高选择器权重才是可靠做法 - 避免
@import：它在 CSS 文件里执行，会强制串行加载，实际顺序和你在 HTML 里写的<link>顺序完全脱钩
<link rel="icon"> 的多尺寸声明怎么写才不模糊
只写一个 <link rel="icon" href="favicon.ico"> 能跑，但现代设备（iOS、Android PWA、高 DPI 屏幕）会默认取 16×16 像素，导致图标糊成一团。
- 每个
<link>只能指定一种sizes，所以多尺寸必须拆成多个标签 - 推荐组合：
<link rel="icon" href="icon-16.png" sizes="16x16" type="image/png">、<link rel="icon" href="icon-32.png" sizes="32x32" type="image/png">、<link rel="icon" href="icon-192.png" sizes="192x192" type="image/png"> -
sizes="any"对rel="icon"无效，那是rel="mask-icon"（Safari pinned tab）专用 - .ico 文件虽可打包多尺寸，但 Chrome 等浏览器仍优先按
sizes属性决策，不能依赖内置尺寸自动适配
rel="preload" as="style" 和 rel="stylesheet" 必须配对使用
<link rel="preload" as="style" href="main.css"> 只加速下载，不触发解析；它不会把 CSS 注入 CSSOM，也不改变加载顺序。
- 必须额外写一行
<link rel="stylesheet" href="main.css">，且它的位置决定了实际应用时机 - preload 标签可以提前放在
开头，但 stylesheet 标签仍需按逻辑顺序插入（比如基础样式之后、页面样式之前） - 误以为 preload = 提前生效，结果样式还是被后面加载的文件覆盖——因为真正起作用的是 stylesheet 标签的位置，不是 preload
最容易被忽略的点：构建工具（如 Webpack/Vite）可能打乱原始 <link> 顺序，尤其是动态 import 或 CSS in JS 场景；上线前务必用 DevTools 的 Network + Elements → Styles 面板交叉验证实际加载与覆盖顺序。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
