标签必须放在中，不能放里；否则会导致FOUC、IE忽略或样式静默失效，且rel="stylesheet"缺失、href路径错误、media语法错误均不报错但无效。
link 标签必须放在 里，不能放 body 开头
浏览器按 HTML 文本顺序解析，<link> 放在 里（哪怕紧贴开头）会导致 FOUC：页面先无样式渲染一次，等 CSS 下载完再重绘。这不是 bug，是规范行为。
实操建议：
-
<link>必须是的直接子元素，且尽量靠前（<title></title>后、<script></script>前） - 服务端渲染（SSR）时，若
是 JS 拼出来的，要确保最终 HTML 字符串里<link>真实存在于内 - 别用 JS 动态插入
<link>来“优化首屏”——样式延迟应用的风险得自己扛
rel="stylesheet" 缺不得，漏了就静默失效
只写 <link href="style.css">，没 rel="stylesheet"，浏览器根本不会把它当样式表处理：不下载、不解析、控制台也不报错。
常见错误现象：
立即学习“前端免费学习笔记（深入）”；
- 路径明明对、服务器返回 200，但页面就是没样式
- Network 面板看不到
style.css请求 - Elements 面板中
下能看到<link>，但 Styles 面板为空
注意：rel="preload" 或 rel="prefetch" 不会触发样式应用，只有 rel="stylesheet" 才行。
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
href 路径以 HTML 文件为基准，不是 CSS 文件位置
href 解析永远相对于当前 HTML 文件 URL，这点最容易搞错。
使用场景与参数差异：
- 绝对路径（推荐用于生产）：
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 检查失败而阻断加载
真正影响加载效果的，从来不是“选哪种方式”，而是 <link> 是否放对位置、路径是否稳定、rel 是否写全——这些细节一错，整个样式链就断了。
