标签必须放在中，不能放里；否则会导致FOUC、IE忽略或样式静默失效，且rel="stylesheet"缺失、href路径错误、media语法错误均不报错但无效。

link 标签必须放在

里，不能放 body 开头

浏览器按 HTML 文本顺序解析， 放在 里（哪怕紧贴开头）会导致 FOUC：页面先无样式渲染一次，等 CSS 下载完再重绘。这不是 bug，是规范行为。

实操建议：

• 必须是 的直接子元素，且尽量靠前（ 后、<script></script> 前）
• 服务端渲染（SSR）时，若 是 JS 拼出来的，要确保最终 HTML 字符串里 真实存在于 内
• 别用 JS 动态插入 来“优化首屏”——样式延迟应用的风险得自己扛

rel="stylesheet" 缺不得，漏了就静默失效

只写 ，没 rel="stylesheet"，浏览器根本不会把它当样式表处理：不下载、不解析、控制台也不报错。

常见错误现象：

• 路径明明对、服务器返回 200，但页面就是没样式
• Network 面板看不到 style.css 请求
• Elements 面板中 下能看到 ，但 Styles 面板为空

注意：rel="preload" 或 rel="prefetch" 不会触发样式应用，只有 rel="stylesheet" 才行。

href 路径以 HTML 文件为基准，不是 CSS 文件位置

href 解析永远相对于当前 HTML 文件 URL，这点最容易搞错。

htmlppt.skill

把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。

下载

使用场景与参数差异：

• 绝对路径（推荐用于生产）：href="/css/style.css" —— 从域名根开始，不受 HTML 存放位置影响
• 相对路径：href="css/style.css" —— 如果 HTML 在 /blog/post.html，就会去请求 /blog/css/style.css
• 本地双击打开（file:// 协议）时，相对路径可能因浏览器安全策略失败，务必用本地服务器测试
• 构建工具（如 Vite、Webpack）常自动重写 href，但手动拼接字符串（比如 href="css/" + name + ".css"）极易断裂

media 属性写错会让 CSS “条件性消失”

media 用于响应式或打印等场景，但它写错不会报错，而是静默不加载对应 CSS。

容易踩的坑：

• media="screen and (min-width: 768px)" 写成 media="(min-width: 768px)"（缺 screen and）—— 大部分现代浏览器仍能识别，但老版本或特定环境可能失效
• media="print" 写成 media="printer" 或拼错单词，CSS 就只在打印预览里生效，平时完全不可见
• CDN 引入时漏加 integrity 和 crossorigin，可能因 Subresource Integrity 检查失败而阻断加载

真正影响加载效果的，从来不是“选哪种方式”，而是 是否放对位置、路径是否稳定、rel 是否写全——这些细节一错，整个样式链就断了。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！