link标签必须放在中且rel="stylesheet"不可省略，否则css不生效；路径推荐根相对路径，type="text/css"可省略，多个link需按重置→框架→自定义顺序排列。
link 标签必须放在 rel="stylesheet" 不可省略——漏掉这个属性，浏览器会把 CSS 文件当普通链接处理，文件虽下载成功，但样式完全不生效。
为什么 link 必须写在
浏览器解析 HTML 是自上而下流式进行的，CSS 是渲染阻塞资源。如果 link 放在 底部或任意位置，页面会先无样式渲染（FOUC：Flash of Unstyled Content），再重绘一次，造成文字跳变、布局抖动、媒体查询失效等肉眼可见问题。
- 即使“看起来能用”，实际已破坏首屏稳定性
- 移动端尤其明显：字体加载延迟、按钮错位、响应式断点未触发
- 某些框架（如 Vue SSR、Next.js）依赖服务端预渲染时的样式就绪，
外放置会导致 hydration 不一致
href 路径写错是 404 的主因，别信“相对路径很直观”
相对路径基于当前 HTML 文件所在目录计算，不是基于当前 URL 或服务器根目录。嵌套子页（如 /blog/article.html）中写 href="css/style.css"，浏览器实际请求的是 /blog/css/style.css，而非你期望的 /css/style.css。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 开发时打开浏览器 Network 面板，点击报 404 的 CSS 请求，看 “Initiator” 列就能定位是哪个
link发起的 - 推荐统一用根相对路径：
href="/css/style.css"（开头带/），避免层级嵌套带来的歧义 - 绝对 URL（如
https://cdn.example.com/css/main.css）适合 CDN 资源，但需注意 SRI（Subresource Integrity）校验是否配置
rel="stylesheet" 是生效开关，type="text/css" 可删
HTML5 规范中 type="text/css" 已为默认值，显式声明纯属冗余，还多占字节；而 rel="stylesheet" 才是浏览器识别“这是要解析并应用的样式表”的唯一关键标识。
- 错误写法：
<link href="style.css">→ 下载但不解析 - 正确写法：
<link rel="stylesheet" href="style.css"> - 若使用构建工具（Vite/Webpack），
link常由插件注入，手动补写反而可能重复或路径错位
多个 link 的顺序直接影响样式覆盖和首屏性能
CSS 加载是串行阻塞的：浏览器按 link 出现顺序依次下载、解析、构建 CSSOM。后加载的 CSS 规则可覆盖前面同选择器的声明，但顺序错乱会导致意料外的样式丢失或重绘。
- 推荐顺序：重置类（如
normalize.css）→ 框架（如bootstrap.min.css）→ 自定义样式（custom.css） - 非关键 CSS（如打印样式、暗色主题）用
media属性隔离：<link rel="stylesheet" href="print.css" media="print">，它仍会下载，但不参与初始渲染 - HTTP/2 下多个小 CSS 文件影响不大，但超过 5–6 个仍建议合并关键 CSS，避免过多解析开销
rel 属性这三处细节。哪怕只错一个斜杠或少一个引号，控制台里都可能只显示一行模糊的 net::ERR_ABORTED。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
