rel属性是决定资源加载、安全策略和SEO效果的关键语义标识；stylesheet强制同步加载CSS，icon触发favicon下载，preload需as属性才预加载，noopener noreferrer防止新窗口XSS攻击，canonical和alternate影响搜索引擎索引。
rel 属性不是可有可无的装饰，写错值会导致资源不加载、预取失效、SEO 降权甚至安全漏洞。 它明确告诉浏览器“这个 <link> 或 <a></a> 和当前页面是什么关系”，不同值触发完全不同的底层行为。
哪些 rel 值会真正触发资源下载或连接建立
只有部分 rel 值会让浏览器主动发起网络请求；其余多数仅提供语义信息（如给搜索引擎看）。
-
stylesheet：唯一被广泛支持且强制同步加载的类型。必须配合href指向 CSS 文件，否则浏览器忽略；type="text/css"可省略，但若写错（如type="css"）可能在旧版 Safari 中失效 -
icon：浏览器默认尝试加载，即使路径 404 也会发请求；建议显式写sizes（如sizes="32x32"）并提供多尺寸<link rel="icon">链，避免 fallback 到根目录/favicon.ico的额外请求 -
preload：必须带as属性（如as="script"、as="font"），否则被当作普通prefetch处理；as="font"还需加crossorigin，否则字体加载失败且无报错 -
preconnect和dns-prefetch：前者建立完整 TCP+TLS 连接，后者只查 DNS；不要对同域名重复写多个preconnect，浏览器只用第一个，多余项浪费连接池 slot
哪些 rel 值影响新窗口打开的安全上下文
在 <a target="_blank"></a> 上漏写或错写 rel，子页面就能通过 window.opener 访问并篡改父页面 —— 这是真实 XSS 攻击链起点。
-
noopener：切断window.opener引用，子页面无法访问父页面 DOM 或执行脚本；Chrome/Firefox/Edge 全支持，但 Safari 12.1 之前需手动加 -
noreferrer：除隐式包含noopener外，还会禁发Referer请求头；注意它让 analytics 工具丢失来源数据，内部跳转慎用 -
noopener noreferrer是最稳妥组合；两个值顺序无关，但必须空格分隔，写成rel="noopener,noreferrer"（逗号）会完全失效
哪些 rel 值被搜索引擎识别但不触发运行时行为
这些值对用户不可见，但直接影响爬虫如何索引、聚合和展示你的内容。
-
canonical：必须放在中，href必须是绝对 URL（如https://example.com/page），相对路径或协议相对路径（//example.com/page）会被忽略 -
next/prev：仅适用于严格线性分页（如/blog/1→/blog/2），不能用于带查询参数的筛选页（如/products?color=red）；Google 已不再依赖它们做分页合并，但仍建议保留以兼容其他工具 -
alternate：搭配hreflang时，所有语言版本页面必须互相双向声明（A 页面有rel="alternate" hreflang="en"指向 B，B 也得有对应指向 A），否则 hreflang 标记无效
容易被忽略但上线就出问题的细节
很多 rel 值表面简单，实际有硬性约束，一错就静默失效。
-
stylesheet只能用于<link>，写在<a></a>上毫无意义；同样，icon也不能用在<a></a> -
author已被 Chrome 94+ 废弃，Firefox 也仅保留兼容；现在应改用<meta name="author">或 JSON-LD -
nofollow对站内链接基本无效 —— Google 自 2020 年起已将其视为提示而非指令，且不传递权重；外链才需考虑是否加 - 多个
rel值必须用空格分隔（如rel="preload stylesheet"），不能用逗号、分号或换行；浏览器遇到非法分隔会整个忽略该属性
