HTML标签之link标签与文档结构的关联分析-html教程-PHP中文网

link标签必须放在内，否则样式可能不生效；rel值写错或漏写（如rel="stylesheet"拼错）会导致浏览器静默忽略，css不加载；preload需配准as属性（如as="style"）并置于最前，否则降级为低优fetch。

html标签之link标签与文档结构的关联分析

link 标签必须放在里，否则样式可能不生效

浏览器解析 HTML 时，会按顺序构建 DOM 和 CSSOM。如果 <link rel="stylesheet"> 写在里，部分浏览器（如旧版 Safari、IE）会阻塞渲染但不阻塞解析，导致 FOUC（页面先无样式闪现再重绘）；更隐蔽的是，现代 Chrome/Firefox 虽能“修复”加载，但资源发现时机延后——DNS 预解析、预连接、preload 提升优先级等机制全失效。

验证方式：打开 DevTools → Network → Waterfall 视图，看 link 请求的 Start Time 是否紧贴 HTML 解析起点（通常在 TTFB 后 10ms 内）
动态插入 <link>（比如用 JS 创建并 append 到）也能加载，但等于放弃浏览器原生资源调度，无法触发 early hint 或 server push
rel="icon"、rel="preconnect" 等同样受位置限制——哪怕只是 favicon，放错位置也会让高分屏设备 fallback 到默认 16×16 图标

rel 值写错或大小写敏感，样式静默失效

rel="stylesheet" 是唯一被浏览器识别为“需立即加载并解析 CSS”的关系值。拼成 rel="styleSheet"、rel="css" 或漏写，浏览器直接忽略该标签，控制台不报错，也不发请求。

Wechat Article Html

将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。

下载

服务端返回的 CSS 文件若 Content-Type 不是 text/css（比如 application/octet-stream），即使 rel 正确，旧版 Safari 仍拒绝解析；加 type="text/css" 可触发兼容 fallback
rel="preload" 必须配 as="style"，否则当普通 fetch 处理，不提升优先级，也不参与 CSSOM 构建
同一资源不能既 preload 又 stylesheet——href 路径（含查询参数）稍有差异，就触发重复请求；跨域时 CORS 头不一致还会导致第二次请求失败

多个 `link` 并存时，顺序和 sizes 决定最终效果

浏览器对 rel="icon" 的匹配是线性扫描：从上到下取第一个满足当前设备条件的条目。把 sizes="16x16" 放最前，高分屏设备可能永远用不上 sizes="192x192" 的版本。

sizes="any" 对 rel="icon" 无效，只对 rel="mask-icon"（Safari pinned tab）起作用
rel="apple-touch-icon" 不写 sizes，iOS 会强制缩放到 180×180，PNG 图像模糊；必须显式声明 sizes="180x180"
多个 rel="stylesheet" 按 HTML 中出现顺序加载，后加载的 CSS 规则覆盖前面同选择器的声明——这不是 bug，是层叠规则的一部分

preload 的 as 属性错配，等于没写

rel="preload" 的核心不是“提前下载”，而是“告诉浏览器这个资源马上要用，按对应类型处理”。漏写 as 或写错，浏览器降级为普通 link href，失去优先级、CORS 行为和 MIME 类型预判。

字体必须用 as="font"，且跨域时加 crossorigin；否则即使预加载成功，@font-face 仍因 CORS 失败 fallback
CSS 用 as="style"，JS 用 as="script"，图片用 as="image"——写成 as="fetch" 或留空，字体/图片会被当成脚本加载，触发 CSP 拦截或 MIME 类型不匹配警告
rel="prefetch" 和 rel="preload" 完全不同：前者是空闲时加载、不保证执行、Chrome 95+ 默认禁用非同源 prefetch；别把它当 preload 的“弱化版”来用