rel="stylesheet"是唯一安全有效的CSS引入方式，其他值如style、css、import、prefetch等均无效或已废弃，且rel值严格区分大小写、不可含空格。
rel="stylesheet" 是唯一安全的选择
HTML 中用 <link> 引入外部 CSS 文件时，rel 属性必须设为 stylesheet，否则浏览器不会当作样式表加载。其他值比如 style、css 或空值都无效，页面会白屏或样式不生效。
-
rel="stylesheet"触发浏览器同步下载并阻塞渲染（这是预期行为） -
rel="preload"可配合as="style"提前加载，但不能替代stylesheet—— 它只是预加载，不应用样式 -
rel="alternate stylesheet"仅用于可切换的备用样式表，需配合title属性，主样式仍需一个rel="stylesheet"
不要用 rel="import" 或 rel="prefetch" 加载 CSS
rel="import" 已被所有现代浏览器废弃（Chrome 73+ 移除），用它引入 CSS 不会报错但完全无效果；rel="prefetch" 是为未来导航预取资源，浏览器可能延迟甚至跳过加载，绝不能用来加载当前页必需样式。
- 常见错误：复制 Web Components 示例里的
rel="import"到普通 HTML 中，结果样式消失 -
rel="prefetch"+as="style"看似合理，但实际不触发样式解析，只存到 HTTP 缓存里 - 真正想异步加载 CSS？得用
rel="stylesheet"+media="print"+ JS 动态切换 media，或用loadCSS库
rel 值大小写敏感，且不能带空格或引号外字符
rel 属性值是大小写敏感的枚举值，REL="STYLESHEET" 或 rel=' stylesheet '（首尾空格）都会导致失败。浏览器只认全小写、无多余空白的 stylesheet。
- Vue / React 模板中动态拼接
rel时，注意变量是否含不可见字符或换行 - 服务端渲染（SSR）模板里如果用
rel="{{ type }}"，确保type输出就是纯字符串stylesheet - 检查浏览器开发者工具 Network 面板：如果 CSS 请求状态是 pending 或没发起，先看
rel是否拼错
link 标签位置和 blocking 行为影响首屏渲染
<link rel="stylesheet"> 放在 <head> 里会阻塞 HTML 解析和渲染，这是规范要求，不是 bug。但放错位置或加错属性会让问题更隐蔽。
立即学习“前端免费学习笔记（深入）”；
- 放在
<body>底部？浏览器仍会阻塞渲染，且可能触发重排，不推荐 - 加了
disabled属性？样式表会加载但不应用，适合按需启用主题 - 想非阻塞加载又保持关键样式？把最小必要 CSS 内联进
<style>，其余用rel="stylesheet"+media="x"+ JS 后续切换
rel 的本质是告诉浏览器“这个链接指向什么类型资源”，配错就等于给导航标错了路——浏览器照走，但到不了目的地。
