rel="stylesheet"是唯一合法取值，拼写错误、引号缺失或位置错误均导致样式不生效；href路径须相对于html文件；link必须置于head内；type="text/css"可省略。
rel="stylesheet" 是唯一合法取值，写错就等于没连
浏览器只认 rel="stylesheet" 这一种写法，漏掉引号、拼成 rel="style" 或 rel="css"，整条 <link> 就被忽略——页面不会报错，但样式就是不生效，查半天控制台也找不到 CSS 加载记录。
常见错误现象：
-
rel="style"或rel="css"：语义无效，浏览器直接跳过 -
rel='stylesheet'（单引号）：HTML 允许，但部分老旧构建工具或校验器会警告，统一用双引号更稳妥 -
rel=stylesheet（无引号）：仅当值不含空格/特殊字符时 HTML5 容忍，但极易因后续加参数崩掉，必须加引号
href 路径必须相对于 HTML 文件，不是 CSS 文件也不是服务器根目录
路径解析规则是“以当前 HTML 文件为起点”，这是 80% 的 404 样式加载失败的根源。比如 HTML 在 /pages/about.html，CSS 在 /css/main.css，那 href 就得写 ../css/main.css，而不是 /css/main.css 或 css/main.css。
实操建议：
- 本地双击打开 HTML 时，
href="/css/main.css"会指向磁盘根目录（file:///css/main.css），必然 404；只有部署到 HTTP 服务后才有效 - 开发阶段优先用同级目录结构：HTML 和 CSS 都放在
/下，直接写href="main.css"，零路径风险 - 路径中不要用中文或空格，URL 编码易出错，且某些旧服务器不支持
link 标签必须放在 head 里，放 body 里会触发重排甚至闪屏
浏览器解析 HTML 是流式的，<link rel="stylesheet"> 放在 里，意味着 DOM 已开始渲染部分内容，此时再加载 CSS，浏览器必须回退、重新计算样式、重绘，旧版 IE 直接闪屏，现代浏览器也会卡顿。
使用场景与影响：
- SEO 和首屏性能：CSS 阻塞渲染，
内尽早声明，才能让浏览器尽快下载并阻塞后续渲染，避免 FOUC（Flash of Unstyled Content） - 不能靠 JS 动态插入来“优化”：比如
document.body.appendChild(link)，一样晚于初始渲染，起不到关键 CSS 作用 - 如果真要延迟加载非关键 CSS，应使用
rel="preload"+onload切换rel="stylesheet"，但这是进阶操作，普通项目别绕标准流程
type="text/css" 可以删，删了更干净
HTML5 已将 type="text/css" 设为默认值，写上不仅冗余，还可能在未来规范变更中成为隐患。保留它唯一的好处是“心理安慰”，实际毫无作用。
容易踩的坑：
- 误以为
type是必需属性：不是，rel和href才是硬性要求 - 和
<script></script>混淆：<script type="module"></script>还有实际意义，但<link type="text/css">纯属历史遗留 - 团队协作时有人坚持加，结果代码风格不统一，还可能被 Linter 报警
rel 拼错、href 路径算错、<link> 放错位置这三处——它们都不报红，但样式就是不出现。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
