rel 属性是浏览器加载资源、搜索引擎理解语义、安全策略生效的硬性开关；漏写、错写或用错标签会导致资源不加载、链接失效、安全防护形同虚设。
rel 属性不是可有可无的修饰，它是浏览器加载资源、搜索引擎理解语义、安全策略生效的硬性开关——漏写、错写或用错标签，资源就不加载，链接就失效，安全防护就形同虚设。
rel="stylesheet" 必须显式声明，否则 CSS 根本不生效
只写 <link href="main.css">，浏览器会直接跳过这条标签；必须带上 rel="stylesheet"，CSS 才会被识别并加载。这个值是唯一全兼容、强制要求的 rel 值，且仅对 <link> 有效。
- 相对路径以 HTML 文件所在位置为基准，不是 JS 执行位置或当前 URL
- 多个
rel="stylesheet"按 DOM 顺序级联，后加载的 CSS 可覆盖前面同选择器的规则 -
disabled属性无效：设disabled="true"仍会发请求，只是不应用样式 - CSS 文件返回 404 时浏览器静默失败，不报错，但可通过
onerror监听
rel="noopener noreferrer" 只在 target="_blank" 场景下起作用
单独写 rel="noopener" 或 rel="noreferrer" 在 <a> 标签里，但没配 target="_blank"（或其它非 _self 值），这两个属性会被浏览器彻底忽略——不是警告，是完全不生效。
-
rel="noopener"切断window.opener引用，防 XSS 劫持 -
rel="noreferrer"清空document.referrer，同时隐式包含noopener - Chrome 88+ 默认为
target="_blank"启用noopener，但 Safari、Firefox 仍需显式声明 - 拼写必须小写、无连字符、空格分隔：
rel="noopener noreferrer"正确，rel="NOOPENER"或rel="no-follow"全部无效
rel="preload" 和 rel="prefetch" 行为完全不同，不能混用
rel="preload" 是高优先级、同步触发的强制加载；rel="prefetch" 是低优先级、空闲时才尝试的后台预取。写反了，首屏可能卡顿，关键资源反而被挤占。
立即学习“前端免费学习笔记（深入）”；
-
rel="preload"必须带as属性，如as="script"、as="font"，否则多数浏览器直接忽略 -
as="font"要求目标字体支持 CORS，否则加载失败且不触发onerror -
rel="prefetch"适合下一屏可能访问的页面或 JS chunk，不适合首屏关键资源 - 两者都不影响文档结构，但写错
as值或路径，等于白发一次请求还浪费带宽
最容易被忽略的是：rel 是强制属性，不是“加了更好”的可选配置；它直接决定浏览器是否解析这条标签、如何加载资源、是否参与渲染、是否切断 opener 引用——哪怕只漏一个引号、拼错一个字母，行为就彻底改变。
