HTML5正式支持约20个rel值，但仅部分被主流浏览器实现：stylesheet（唯一触发CSS加载）、icon（需type和sizes）、preload（须配as）、prefetch（空闲低优先级）、preconnect（单域名）、dns-prefetch；noopener/noreferrer仅对target="_blank"有效；alternate/author/next等慎用；第三方服务要求的rel值需严格按规范配as、crossorigin等属性。
rel 属性不是“可选填的描述字段”，它直接决定浏览器是否加载资源、如何缓存、是否预加载、是否影响 SEO 和安全策略。填错或漏填，link 标签可能完全失效，甚至引入 XSS 或性能隐患。
哪些 rel 值是 HTML5 正式支持且有明确行为的
HTML5 规范明确定义了约 20 个标准 rel 值，其中真正被主流浏览器实现并产生实际效果的不到一半。优先使用这些：
-
stylesheet：唯一能触发 CSS 加载和应用的值；其他如style或css会被忽略 -
icon：用于 favicon；必须配合type（如image/x-icon）和sizes（如32x32）才可靠生效 -
preload：需同时指定as（如as="script"），否则降级为普通link，不触发预加载 -
prefetch：仅在空闲时低优先级获取，as不强制但建议填写；与preload混用会相互干扰 -
preconnect：只接受单个域名（如https://cdn.example.com），不能带路径；多个域名需拆成多个link -
dns-prefetch：比preconnect更轻量，只做 DNS 查询；对 HTTPS 站点效果有限，因现代浏览器已自动优化
rel="noopener" 和 rel="noreferrer" 的真实作用边界
这两个值只在 中有意义， 标签上写它们完全无效——浏览器直接忽略。常见误用：
- 把
rel="noopener"加到上，以为能防漏洞，实则无任何效果 - 混淆
noreferrer和no-referrer：后者是的referrer值，两者协议层级不同 -
noopener本身不阻止 referrer；要同时隐藏来源，需组合rel="noopener noreferrer"
容易被当成“标准”但实际未被规范或已废弃的值
以下值在部分文档或旧教程中出现，但要么从未进 HTML 标准，要么已被移除，慎用：
立即学习“前端免费学习笔记（深入）”；
-
alternate：仅在配合type和hreflang用于 RSS/Atom 订阅时有效；单独写rel="alternate"对 SEO 无益，Google 明确表示不识别 -
author、help、license：HTML5 保留但无默认处理逻辑；浏览器既不加载也不暴露 API，纯语义占位 -
next/prev：曾用于分页导航，现已被搜索引擎忽略；Pagination 应靠+ 结构化数据 -
shortlink：RFC 4287 定义，但无浏览器行为；GitHub 等平台用它只是约定，非标准执行
第三方服务要求的 rel 值怎么处理
CDN、字体服务商（如 Google Fonts）、分析脚本常要求你加特定 rel，例如：
这类写法有效，但注意：
- Google Fonts 的
display=swap是 CSS 属性，和rel无关；rel="stylesheet"才真正触发加载 - Cloudflare、jsDelivr 等 CDN 文档里写的
rel="preload"必须配as="script"或as="font"，否则 Chrome 不预加载 - 某些广告 SDK 要求
rel="preload"+crossorigin，若漏掉crossorigin，字体或脚本会因 CORS 失败而静默中断
最常被忽略的是：同一个资源多次声明不同 rel（比如既 preload 又 prefetch），浏览器不会合并请求，反而可能触发重复 fetch 或竞争加载。该用哪个，得看资源使用时机——首屏关键 JS 用 preload，下一页可能用的图片用 prefetch。
