link标签不报错但样式/图标/预加载失效，主因是rel="stylesheet"拼写错误或缺失、href路径基准错误、link未置于head内；三者均导致静默忽略，无控制台报错。
link 标签不报错，但样式/图标/预加载失效——这是最典型的“静默故障”。浏览器不会在控制台抛出错误，只安静跳过，导致白屏、图标模糊、FOUC 或字体 fallback。
rel="stylesheet" 拼错或漏写就等于没写
浏览器只认 rel="stylesheet" 这个精确字符串：小写、带引号、无空格、无拼写偏差。任何偏差都会让整个标签退化为普通链接。
-
rel="StyleSheet"（大小写错）、rel="styleSheet"、rel="css"→ 静默忽略，Network 面板看不到请求，Elements 的 Styles 栏为空 -
rel=stylesheet（缺引号）或rel=" stylesheet "（首尾空格）→ 多数现代浏览器会解析失败，但不报错 - 完全漏掉
rel属性 → 标签存在，但浏览器根本不启动 CSS 加载流程
验证方法：打开 DevTools → Elements → 点开 ，找到你的 <link>，再切到 Styles 面板；如果右侧面板空白，且 Network 里没有对应 CSS 请求，先盯死这个 rel 值。
href 路径算错导致 404，但你可能根本没看见
href 的基准永远是当前 HTML 文件的 URL，不是你编辑器里打开的目录，也不是 CSS 文件所在位置。本地双击打开 file:// 协议时，相对路径还可能被安全策略拦截。
- HTML 在
/blog/post.html，想引用根目录下的/css/main.css，必须写href="/css/main.css"（开头/） - 写成
href="css/main.css"→ 实际请求的是/blog/css/main.css，404 - 写成
href="./css/main.css"→ 和上面等价，仍是相对 HTML 位置计算 - 本地开发务必用
python -m http.server或vite preview启服务，别双击 HTML
快速定位：Network 面板中看失败请求的 “Initiator” 列，它会明确告诉你哪个 HTML 文件发起了这次 404 请求。
link 放在 body 里，FOUC 和 IE 忽略只是表象
把 <link rel="stylesheet"> 写在 中，问题不止是“页面闪一下”。它直接破坏浏览器资源调度链：
- DNS 预解析、TCP 预连接、preload 提升优先级等机制全部失效
- Chrome/Firefox 会尝试“修复”，但加载时机延后几十毫秒，关键 CSS 可能错过首屏渲染窗口
- IE6–8 直接跳过，整页无样式；SSR 或 Next.js 项目还会触发 hydration 不一致警告
- 动态用 JS 插入
<link>（比如document.head.appendChild(link)）效果等同于放——放弃原生调度，FOUC 可预期
正确位置：必须是 的直接子元素，推荐顺序：<title></title> → <link rel="stylesheet"> → 其他 <script></script>。
media 属性写错会让 CSS “条件性消失”
media 不是装饰字段。一旦写了但语法非法，整个 <link> 会被浏览器视为无效，CSS 不加载、不报错、Network 也不显示请求。
-
media="screen and (min-width:768px"（少一个)）→ 静默失效 -
media="print"写在普通页面里 → CSS 只在打印预览时生效，浏览时不可见 - 没写
media→ 默认等价于media="all"，始终生效 -
media="screen and (min-width: 768px)"中空格过多或用了中文符号（如全角括号）→ 解析失败
最容易被忽略的其实是 rel 的严格性和 href 路径基准——它们不报错，却让整个样式链静默断裂。检查时优先盯死这两点，比翻 CSS 规则本身更高效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
