rel属性是强制性核心属性，决定资源加载、渲染、安全及seo语义；无rel的link标签无效，stylesheet全兼容且必须显式声明，preload需as属性且高优先级，prefetch低优先级后台预取，noopener/noreferrer仅对a标签配合target="_blank"生效。
rel 属性不是可有可无的装饰，它直接决定浏览器是否加载资源、如何加载、是否参与渲染、是否影响安全上下文，甚至被搜索引擎当作语义信号。用错值，轻则资源不加载，重则引入 XSS 风险或破坏预加载逻辑。
rel="stylesheet" 是唯一全兼容且必须显式声明的值
所有浏览器都支持 rel="stylesheet"，但其他值支持度参差不齐——比如 rel="search" 在 Opera 和 Safari 中不生效，rel="sidebar" 在 IE/Safari/Chrome 中被忽略。关键点在于：rel 是强制属性，<link> 没有 rel 就是无效标签，浏览器会跳过解析。即使你只写 <link href="theme.css">，也不会加载 CSS。
必须搭配 href，且路径需正确；相对路径以 HTML 文档位置为基准，不是以当前 JS 执行位置。不支持 disabled 属性控制开关——设 disabled="true" 仍会发起请求，只是不应用样式。多个 rel="stylesheet" 会按顺序级联，后加载的规则可覆盖前面同选择器的声明。
rel="preload" 和 rel="prefetch" 容易混淆但行为完全不同
rel="preload" 是高优先级、强制、同步触发的资源提前加载；rel="prefetch" 是低优先级、空闲时才执行、不保证完成的后台预取。
- 常见错误是把字体或关键 JS 写成
prefetch，结果首屏渲染卡顿；或者给非关键图片加preload，挤占带宽反而拖慢主资源 -
rel="preload"必须带as属性（如as="font"、as="script"），否则多数浏览器忽略 -
as="font"要求 CORS 支持，否则加载失败且不触发onerror -
rel="prefetch"不阻塞页面解析和渲染，适合下一屏可能访问的页面或 JS chunk
rel="noopener noreferrer" 只在 target="_blank" 时生效
rel="noopener" 和 rel="noreferrer" 对 <a></a> 标签无效，除非同时存在 target="_blank"（或 target="_new" 等非 _self 值）。单独写 rel="noopener" 不会报错，但浏览器直接忽略该属性。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
Chrome 88+ 开始，即使没写 rel，target="_blank" 也会默认启用 noopener 行为；但 Safari、Firefox 仍需显式声明。若只关心隐私不关心安全，可用 rel="noreferrer"，它会清空 document.referrer，但不切断 window.opener。
实操中优先用 rel="noopener noreferrer"，尤其在 CMS、评论区、富文本编辑器等用户可插入链接的场景。注意拼写：写成 rel="no-follow" 或 rel="NOFOLLOW" 都无效——必须小写、无连字符、空格分隔。
rel 值不能混用，且部分只对 link 或 a 标签有效
不是所有 rel 值都适用于超链接；有些只对 <link> 有效，硬套到 <a></a> 上纯属浪费字节。例如：
-
rel="stylesheet"、rel="preload"、rel="prefetch"、rel="preconnect"、rel="dns-prefetch"只用于<link> -
rel="noopener"、rel="noreferrer"、rel="nofollow"、rel="sponsored"、rel="ugc"主要用于<a></a>，且多数需配合target="_blank"才起作用 -
rel="canonical"、rel="next"、rel="prev"、rel="alternate"必须放在中，且href通常需为绝对路径
多个值可共存，用空格分隔，例如 rel="nofollow ugc" 合法且常见，等价于两个独立语义叠加。但像 rel="stylesheet prefetch" 这种组合毫无意义——浏览器只认第一个有效值，其余被忽略。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
