rel属性是强制性核心属性，漏写或错写会导致link标签被浏览器忽略；rel="stylesheet"必须显式声明且路径正确才能加载css；rel="icon"需配sizes和type才可靠；rel="preload"须带as属性且高优先级，rel="prefetch"为低优先级后台预取；rel="noopener noreferrer"仅对target="_blank"的a标签有效。
rel 不是可选的描述字段，漏写、错写或乱加值，<link> 标签就等于没写——浏览器直接跳过，资源不加载、图标不显示、预加载失效，甚至埋下 XSS 风险。
rel="stylesheet" 必须显式声明且路径正确
这是唯一被所有浏览器强制同步加载 CSS 的 rel 值。不写 rel="stylesheet"，哪怕 href 指向正确的 CSS 文件，样式也完全不会生效。
-
<link href="theme.css">→ 无效，浏览器忽略 -
<link rel="stylesheet" href="theme.css">→ 有效，按顺序级联应用 -
type="text/css"可省略，但若误写为type="css"，旧版 Safari 可能拒绝加载 - 相对路径以 HTML 文档所在位置为基准，不是当前 JS 执行位置或服务器根目录
- 多个
rel="stylesheet"会按 DOM 顺序加载，后加载的同选择器规则覆盖前面的
rel="icon" 要配 sizes 和 type 才可靠
只写 <link rel="icon" href="/favicon.ico"> 看似能用，但实际触发两次请求：先试 href，失败后 fallback 到根目录 /favicon.ico，多一次无谓 DNS 查询和 404。
- 必须显式声明
sizes（如sizes="32x32"）和type（如type="image/x-icon"或type="image/png"） - 推荐提供多尺寸链：
<link rel="icon" href="/icon-16.png" sizes="16x16" type="image/png">、<link rel="icon" href="/icon-32.png" sizes="32x32" type="image/png"> - 不要依赖浏览器自动查找
/favicon.ico，它已成历史包袱，现代浏览器优先读取<link rel="icon">
rel="preload" 和 rel="prefetch" 行为截然不同
这两个值常被混用，但触发时机、优先级和失败表现完全不同，错配会导致首屏卡顿或资源浪费。
-
rel="preload"是高优先级、强制、同步触发的提前加载，必须带as属性：as="script"、as="font"、as="style"；缺as就当普通链接处理，不加载 -
as="font"必须配合crossorigin，否则字体静默失败，控制台无报错 -
rel="prefetch"是低优先级、空闲时才尝试的后台预取，不阻塞渲染，适合下一屏可能访问的页面或 chunk，但不保证完成 - 别把关键字体写成
prefetch，也别把非关键图片写成preload——后者会挤占主资源带宽
rel="noopener noreferrer" 只对 <a target="_blank"></a> 有效
这两个值写在 <link> 上完全无效，浏览器直接忽略。常见误用是加在 <link rel="stylesheet"> 后面，以为“更安全”，实则毫无作用。
- 仅用于
<a></a>标签，且必须搭配target="_blank"才有意义 -
rel="noopener"切断window.opener引用，防止子页篡改父页 DOM -
rel="noreferrer"隐式包含noopener，并禁发 Referer 请求头；注意 analytics 工具将丢失来源数据，内部跳转慎用 - 两个值必须用空格分隔：
rel="noopener noreferrer"；写成逗号分隔（rel="noopener,noreferrer"）整个属性失效
最容易被忽略的是：所有 rel 值都区分大小写，rel="Stylesheet" 或 rel="ICON" 在部分浏览器中不识别；<link> 必须放在 内，放错位置会导致预加载逻辑被丢弃或延迟触发。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
