rel="stylesheet"必须严格拼写、置于<head>中且href路径正确，三者缺一不可；拼错、放错位置或路径错误均导致样式静默失效、页面白屏或FOUC。
link 标签不是“放个样式表就完事”的配角，它直接决定页面是否白屏、图标是否模糊、关键字体是否加载失败。用错 rel、放错位置、忽略 as 或 crossorigin，问题往往静默发生——控制台不报错，但用户看到的就是未样式化内容或模糊图标。
rel="stylesheet" 为什么总不生效？三个硬性条件缺一不可
浏览器只认 rel="stylesheet" 这个精确字符串，大小写、空格、引号缺失都会导致完全忽略。它不是“差不多就行”的语义标签，而是解析开关。
-
rel必须小写、带双引号、无前后空格：rel="stylesheet"✅；rel=stylesheet❌（缺引号）、rel=" stylesheet "❌（空格）、rel="StyleSheet"❌（大小写） -
href路径以 HTML 文件所在目录为基准，不是编辑器打开路径，也不是 CSS 文件自身位置；href="css/main.css"表示同级目录下有css/文件夹 - 必须放在
<head>内 —— 放在<body>中，IE6–8 直接无视，现代浏览器虽会加载但必然触发 FOUC（闪白），且 SSR 框架中会导致 hydration 不一致报错
favicon 多尺寸适配失效的真正原因
只写一个 <link rel="icon" href="favicon.ico"> 能跑通老浏览器，但在 Chrome 120+、iOS、Android PWA 场景下大概率糊。这不是“图标没做高清”，而是浏览器根本没选对尺寸。
-
sizes属性只对rel="icon"生效，且一个<link>只能声明一种尺寸；多尺寸必须拆成多个标签，例如：<link rel="icon" href="icon-16.png" sizes="16x16" type="image/png">、<link rel="icon" href="icon-32.png" sizes="32x32" type="image/png"> -
sizes="any"对标准rel="icon"无效，仅适用于rel="mask-icon"（Safari 固定标签页） -
.ico文件虽可打包多尺寸，但 Chrome 等浏览器仍优先按sizes属性匹配，不读文件内嵌尺寸信息
rel="preload" 加了却没效果？漏掉 as 和 crossorigin 就等于白写
rel="preload" 是声明式指令，不是脚本，不触发 onload，也不保证执行——但它能强制浏览器“现在就取”，前提是配置精准。
立即学习“前端免费学习笔记（深入）”；
- 必须指定
as：比如预加载字体要写as="font"，否则浏览器当普通fetch处理，跨域字体直接被 CORS 拦截；图片用as="image"，CSS 用as="style" - 跨域资源（如 CDN 字体）必须加
crossorigin属性，否则即使预加载成功，document.fonts.load()也无法使用该字体 - 不能放在
<body>底部：浏览器按 HTML 解析顺序执行 preload，太晚写就错过首屏关键时机
media 属性不是“响应式开关”，而是资源加载过滤器
media 控制的是“这个样式表是否参与当前渲染”，不是“要不要下载”。即使 media="print"，浏览器仍会下载该 CSS，只是不用于屏幕渲染。
-
media="screen and (max-width: 768px)"这类查询在 JS 中无法动态修改，改了也不会重新触发加载或卸载 - 想实现真正的按需加载（比如暗色模式切换），得用 JS 动态切换
disabled属性，或替换href，而不是依赖media -
media="none"是合法值，表示“永不应用”，但资源照常下载——别指望它节省带宽
最常被忽略的其实是加载时序和 MIME 类型：服务端返回的 CSS 响应头若不是 Content-Type: text/css，哪怕 rel 和 href 全对，Safari 旧版或严格模式下也会静默跳过解析。这不是前端能修的 bug，得查服务器配置或 CDN 的 MIME 映射规则。
