标签的 rel 属性和 href 路径必须严格正确，否则样式不生效、图标模糊、预加载失效；rel="stylesheet" 缺一不可，href 以 HTML 文件为基准，多尺寸 favicon 需多个 link 标签，preload 需匹配 as 和 crossorigin。
rel 值，页面就可能白屏、图标不出现、预加载失效。
为什么 rel="stylesheet" 缺一不可
浏览器只认这个 rel 值才真正加载并解析 CSS。漏写、拼错（比如写成 styleSheet 或 css）会导致样式完全不生效，且控制台通常不报错，只静默忽略。
-
rel必须严格小写、带引号、无空格：rel="stylesheet"——rel= stylesheet（缺引号）、rel="stylesheet "（末尾空格）、rel="StyleSheet"全部失效 -
href路径以 HTML 文件所在目录为基准，不是编辑器打开位置，也不是 CSS 文件自身位置；href="css/main.css"表示 HTML 同级目录下有个css/文件夹 -
type="text/css"在 HTML5 中已冗余，写了不报错但没必要；若服务端未返回Content-Type: text/css，加它偶尔能触发兼容 fallback - 多个
<link rel="stylesheet">按书写顺序加载，后加载的同选择器规则会覆盖前面的
<link> 放在 <body> 里会怎样
部分浏览器会阻塞渲染直到样式加载完成，放错位置等于主动制造 FOUC（Flash of Unstyled Content）；更严重的是，IE6–8 直接忽略该标签，整页无样式。
- 必须放在
<head>内，且建议紧贴<title>或<meta>后，别塞在一堆<script>中间 - 用
<script>动态插入<link>会绕过阻塞机制，必然触发 FOUC - 别信“CSS 放底部能提速”——那是 JS 的逻辑，对样式表完全反效果
- SSR 或 Next.js 类框架中，
<link>放<body>还会导致首屏 HTML 与客户端 hydration 不一致而报错
favicon 多尺寸适配为什么总糊
仅写 <link rel="icon" href="favicon.ico"> 能兼容老浏览器，但现代设备（尤其是高 DPI 屏幕、iOS、Android PWA）需要明确尺寸声明，否则可能默认取 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="mask-icon"（Safari pinned tab），对标准rel="icon"无效 - .ico 文件虽可包含多尺寸，但 Chrome 等浏览器仍倾向读取
sizes属性做决策，不能依赖内置尺寸自动适配 -
rel="shortcut icon"是历史写法，已非必需；现代推荐统一用rel="icon"
rel="preload" 预加载为啥没效果
rel="preload" 不是“保证加载”，而是“告诉浏览器：这个资源我马上就要，别等解析完再抓”。写错 as 或没配 crossorigin 就等于白写。
立即学习“前端免费学习笔记（深入）”；
-
as必须准确：字体用as="font"，CSS 用as="style"，JS 用as="script"，图片用as="image"—— 错了会导致浏览器降级为普通<link href>，失去优先级提升 - 字体文件跨域时（如 CDN 上的 WOFF2），必须加
crossorigin，否则即使预加载了，@font-face仍会因 CORS 失败而 fallback 到系统字体 -
rel="preload"应配合实际使用逻辑：比如在<link rel="preload">后，必须在同页面内通过@font-face或<img>真正引用该资源，否则浏览器可能丢弃已加载内容 - 不要滥用：预加载非关键资源（如页面底部的装饰图）反而挤占带宽，拖慢首屏
rel 属性的严格性：它们不报错、不警告，只安静跳过。等你花半小时检查 CSS 写法、清缓存、换浏览器……才发现 rel 少了个字母，或者 href 多了个点。 
