rel属性合法值包括stylesheet、preload、prefetch、alternate stylesheet等，其中stylesheet是唯一触发CSS解析的值；preload需配合as="style"仅预加载；alternate stylesheet需title属性支持；import已废弃。
link 标签中 rel 属性的合法值有哪些
rel 不是随便填的字符串，浏览器只认特定关键词，填错会导致预加载、样式隔离或资源优先级失效。rel="stylesheet" 是唯一能触发 CSS 下载和解析的值；rel="preload" 或 rel="prefetch" 不能替代它。
-
rel="stylesheet"：必须用于引入 CSS 文件，否则样式不生效 -
rel="preload"：可配合as="style"提前拉取 CSS，但不会解析执行 -
rel="alternate stylesheet"：仅在用户手动切换主题时起作用，需配合title属性 -
rel="import"已被废弃，Chrome 73+ 完全移除，不要用
type 属性不是可选的“保险丝”
type 在现代 HTML 中基本没用——浏览器靠 MIME 类型判断资源类型，不是靠 type="text/css"。但写错反而会坏事：如果服务端返回 Content-Type: text/css，而你写了 type="text/plain"，某些旧版 Safari 会直接忽略该 link。
- 可以省略
type，浏览器自动按响应头识别 - 如果非要写，必须与服务端实际返回的 MIME 类型严格一致
-
type="text/css"是唯一安全的值，type="css"或type="style"都无效
rel 和 type 同时出错的典型报错场景
开发者工具里看到 Failed to load resource: the server responded with a status of 404 ()，但路径明明对——很可能是 rel 写成了 "css" 或 "style"，导致浏览器根本没发起请求。
- 错误写法：
<link rel="css" href="main.css">→ 浏览器当普通链接处理，不下载 CSS - 错误写法：
<link rel="stylesheet" type="text/plain" href="main.css">→ Safari 可能静默丢弃 - 调试建议：在 Network 面板过滤
css，确认请求是否发出、状态码是否为 200、Response Headers 中Content-Type是否为text/css
CDN 或构建工具注入 link 标签时的隐性风险
Webpack 的 html-webpack-plugin、Vite 的 html 插件、甚至某些 CDN 自动注入脚本，可能默认加 type 或改写 rel。这些“贴心”行为在跨环境部署时容易暴露。
立即学习“前端免费学习笔记（深入）”；
- 检查构建产物中的
index.html，确认生成的link是否含多余type - 若用
rel="preload"+onload动态加载 CSS，务必确保rel初始为"preload"，加载完成后再改为"stylesheet"（通过 JS 修改） - HTTP/2 推送已废弃，别依赖
Link响应头 +rel=preload组合，不同浏览器支持度差异大
Content-Type 和前端 type 属性之间的隐性耦合——只要服务端配错，哪怕 rel 写得再标准，也救不回样式加载失败。 
