rel="stylesheet"是唯一能加载css的值，必须置于中、配有效href，type可省略；rel="icon"需显式声明type和sizes才可靠；rel="preload"须带as属性，rel="prefetch"为低优先级预取；noopener/noreferrer对无效。
rel="stylesheet" 是唯一能加载 CSS 的值
漏写、拼错（比如写成 style 或 css）或放在 里，CSS 就不会生效。浏览器只认 rel="stylesheet" 这个精确字符串，其他任何变体都会被忽略。
必须搭配有效的 href，且路径以 HTML 文件位置为基准；type="text/css" 可省略，但若写错（如 type="css"）可能在旧版 Safari 中失效。
- 多个
rel="stylesheet"按顺序级联，后加载的样式可覆盖前面同选择器的规则 - 不支持
disabled属性——设了disabled="true"仍会发请求，只是不应用 - 放在
外（比如底部）可能导致 FOUC（无样式内容闪烁）
rel="icon" 需要 type 和 sizes 才可靠显示
只写 <link rel="icon" href="/favicon.ico"> 在现代浏览器中大概率 fallback 到根目录的 /favicon.ico，甚至不显示图标。真正生效需显式声明 type 和 sizes。
iOS 完全不识别 rel="icon"，必须额外加 rel="apple-touch-icon"；Android Chrome 对 sizes 较宽松，Safari 更严格。
-
type必须匹配实际 MIME 类型，如image/x-icon（.ico）、image/png（.png） -
sizes="32x32"建议写全，避免浏览器误判尺寸或跳过加载 - 多个尺寸可并存，浏览器自动选最适配的：
<link rel="icon" href="/icon-16.png" sizes="16x16" type="image/png">
rel="preload" 和 rel="prefetch" 行为完全不同
rel="preload" 是高优先级强制预取，但缺 as 属性就等于没写；rel="prefetch" 是空闲时低优先级后台预取，不保证执行，页面卸载前没完成就白忙。
混用同一资源的 preload 和 prefetch 会相互干扰，导致预加载逻辑错乱。
-
rel="preload"必须带as：如as="font"（跨域字体还需crossorigin）、as="script" -
rel="prefetch"的as是建议项，非强制；适合下一页 JS chunk 或分页 HTML，不适合大图或首屏无关资源 - 别把关键字体写成
prefetch，否则首屏文字可能等不到字体就渲染成默认字体
noopener、noreferrer 在 link 标签上完全无效
这两个值只对 <a target="_blank"></a> 有意义，用于切断 window.opener 引用和禁发 Referer。写在 <link> 上，浏览器直接忽略，既不报错也不起作用。
常见误用是给 <link rel="stylesheet"> 加 rel="noopener"，以为防 XSS，实际毫无意义。
-
rel="noopener noreferrer"必须空格分隔，写成rel="noopener,noreferrer"（逗号）会完全失效 - 想让外链安全？该加的地方是
<a></a>标签，不是<link> - 其他语义值如
rel="next"、rel="author"已被主流浏览器弃用或仅保留兼容
rel="stylesheet" 当描述性字段随便写，或者把 preload 当万能加速器滥用——它不解决路径错误、MIME 不匹配、CORS 缺失这些底层问题，只在正确配置的前提下才起效。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
