rel="stylesheet"是浏览器唯一识别并加载CSS样式表的关键值，漏写、拼错（如styleSheet、css）或位置错误会导致样式静默失效；必须与有效href配对且置于<head>内，否则Network无请求、Computed为空。
rel="stylesheet" 是唯一能加载 CSS 的值
浏览器只认 rel="stylesheet" 才会真正加载并应用样式表；写成 rel="style"、rel="css" 或漏掉这个值，CSS 就不会生效。它必须配合 href 指向一个有效的 .css 文件路径，且推荐放在 <head> 中，避免 FOUC（无样式内容闪烁）。
常见错误：把 rel="stylesheet" 用在非 CSS 资源上，比如指向 JS 或图片——浏览器会忽略请求，控制台可能报 MIME 类型不匹配错误。
rel="icon" 必须配 type 和 sizes 才可靠显示
rel="icon" 用于定义 favicon，但单独写 <link rel="icon" href="/favicon.ico"> 在现代浏览器中可能 fallback 到默认图标或不显示。真实生效需要明确 type（如 image/x-icon 或 image/png）和可选的 sizes（如 sizes="32x32"）。
多个尺寸可并存，浏览器自动选最适配的：
立即学习“前端免费学习笔记（深入）”；
<link rel="icon" href="/icon-16.png" sizes="16x16" type="image/png"> <link rel="icon" href="/icon-32.png" sizes="32x32" type="image/png">
iOS 设备不识别 rel="icon"，需额外加 rel="apple-touch-icon"；Android Chrome 对 sizes 支持较宽松，但 Safari 更严格。
rel="preload" 和 rel="prefetch" 行为完全不同
rel="preload" 是高优先级强制预取，但必须带 as 属性，否则降级为普通 <link>，不触发预加载。例如：<link rel="preload" href="/font.woff2" as="font" crossorigin> —— 缺 as 或错写成 as="fonts" 都无效。
rel="prefetch" 是空闲时低优先级预取，不阻塞渲染，适合下一屏资源；但它不保证执行，用户跳转前页面就卸载了，就不会下载。别和 preload 混用同一资源，会相互干扰。
-
preload：适用于关键资源（首屏字体、核心 JS），需as+ 正确crossorigin（跨域字体必须） -
prefetch：适用于分页 JS、下一页图片，as建议填但非强制
rel="noopener" 和 rel="noreferrer" 对 link 标签完全无效
这两个值只对 <a target="_blank"> 有意义，用在 <link> 上浏览器直接忽略，既不提升安全也不影响行为。常见误用是把 rel="noopener" 加到 <link rel="stylesheet"> 上，以为防 XSS，实际毫无作用。
真正该关心的是：rel="canonical" 影响 SEO（必须绝对 URL）、rel="manifest" 启动 PWA（需 type="application/manifest+json"）、rel="dns-prefetch" 只做 DNS 查询（比 preconnect 更轻量，适合统计域名）。
容易被忽略的一点：所有 rel 值都不是“描述性标签”，填错就等于没写——浏览器按规范硬执行，不是尽力而为。比如 rel="icon" 缺 type，Chrome 可能加载但 Firefox 不显示；rel="preload" 缺 as，连 Network 面板都看不到请求发起。
