link标签必须是head的直接子元素，嵌套在meta、script等标签内会被忽略；rel属性值必须为标准值（如stylesheet、icon、preload），大小写敏感且需配对正确href路径，否则资源不加载。
link 标签必须是 的直接子元素
浏览器只在 一级子节点中解析 <link>，嵌套在 <script></script>、<meta>、<style></style> 或任何其他标签内部，都会被忽略或触发 DOM 自动修复——你写的 HTML 和实际生效的 DOM 完全不是一回事。
常见错误现象包括：
-
<meta> <link rel="stylesheet" href="a.css">：link 不生效，Network 中看不到请求 -
<script><link rel="icon" href="f.png"></script>：图标不显示，控制台报“linknot allowed inscript” - 用 JS 动态插入
<link>到：样式可能延迟应用，且部分浏览器（如旧版 Safari）会拒绝解析
rel 属性值决定 link 的用途，不能乱填
rel 不是装饰字段，它告诉浏览器“这个链接资源是什么类型”。填错就等于没写——比如 rel="css" 或 rel="style" 都无效，只有标准值才被识别。
高频使用组合：
立即学习“前端免费学习笔记（深入）”；
- CSS 文件：
rel="stylesheet"（必须小写，大小写敏感） - Favicon：
rel="icon"，可加type="image/png"显式声明格式 - 预加载关键资源：
rel="preload"，需配合as属性，如as="style"或as="font" - DNS 预解析：
rel="dns-prefetch"，href 填域名，如href="//cdn.example.com"
注意：rel="import" 已废弃，rel="alternate" 用于 RSS 等替代文档，不用于样式。
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
href 路径写错，样式就彻底消失
路径是相对当前 HTML 文件位置计算的，不是相对于网站根目录。比如 /blog/article.html 里写 href="css/main.css"，浏览器实际请求的是 /blog/css/main.css，而不是你认为的 /css/main.css。
判断路径是否正确的实操方式：
- 打开浏览器开发者工具 → Network 标签页 → 刷新页面 → 找
main.css请求 → 看 Status 是否为200 - 如果状态是
404，右键该请求 → “Open in new tab”，看 URL 是不是你预期的路径 - 想强制从根目录开始找，用以
/开头的路径，如href="/css/main.css" - 绝对 URL 更稳妥：
href="https://yoursite.com/css/main.css"，但不利于本地调试和换域名
多个 link 标签的加载顺序影响样式结果
CSS 是阻塞渲染的资源，浏览器按 <link> 在 中出现的顺序依次下载并应用。后加载的样式会覆盖前面同名规则——这不是 bug，是层叠机制的基础。
容易被忽略的细节：
- 不要把重置样式（reset.css）放在自定义样式之后，否则会被覆盖
-
rel="preload"不会改变样式优先级，它只提前下载，仍需另配一个rel="stylesheet"来实际应用 - 动态插入的
<link>默认追加到末尾，等价于写在最后，慎用于覆盖逻辑 - IE 中若
<link>出现在<title></title>之前，可能导致字符编码解析异常（尤其含中文注释时）
真正难的不是贴对标签，而是意识到：每个 <link> 都是一次网络请求、一次解析时机、一次样式注入点——它不在正确位置，就等于不存在。
