HTML4中rel合法值极少且仅用于，仅stylesheet和shortcut icon被广泛支持；HTML5大幅扩展rel语义，新增preload、prefetch、preconnect、icon、manifest等值以支持现代Web功能，并标准化nofollow、noopener、noreferrer等行为，但需注意浏览器兼容性及crossorigin等配套属性。
rel 的合法值非常有限HTML4.01 严格只定义了几个语义明确的 rel 值，且仅用于 （不用于 或 ）。浏览器实际支持更宽泛，但标准只认：stylesheet、start、next、prev、contents、index、glossary、copyright、chapter、section、subsection。其中绝大多数在现实中几乎没人用，真正被广泛支持和依赖的只有：stylesheet（加载 CSS）、shortcut icon（非标准但被 IE 带火的写法，后来被 HTML5 正式收编为 icon）。
rel 值主要是为现代 Web 功能服务HTML5 不再把 rel 当作纯文档结构标记，而是扩展为一种资源关系声明机制，尤其强化对预加载、安全策略、PWA 和语义化链接的支持。关键新增值包括：
preload：声明高优先级资源（如关键字体、JS），浏览器可提前 fetch（但不执行）prefetch：提示浏览器在空闲时预取可能后续需要的资源（如下一页面的 JS）preconnect：提前建立 DNS 查询、TCP 握手、TLS 协商，减少后续请求延迟dns-prefetch：仅做 DNS 预解析，比 preconnect 更轻量modulepreload：专为 ES 模块设计的预加载，确保模块图在执行前就绪icon：正式取代非标准的 shortcut icon，支持多种尺寸和类型manifest：指向 Web App Manifest 文件（application/manifest+json），是 PWA 的基础canonical：虽在 HTML4 后期草案中出现，但直到 HTML5 才成为正式推荐用法，用于指定规范 URL像 nofollow、noopener、noreferrer 这类值，其实早在 HTML4 时代就被部分浏览器实现（尤其用于 ），但 HTML5 第一次将其写入规范，并明确定义行为：
nofollow：告诉搜索引擎不要传递权重，也不应抓取目标页（注意：它对 noopener：在 target="_blank" 场景下防止新页面通过 window.opener 访问原页面，提升安全性（仅对 noreferrer：既阻止 referrer 发送，也隐含 noopener 效果这些值在 中基本无意义，属于“被 HTML5 规范收编但不适用于 link 标签”的情况——别误用。
不是所有 HTML5 rel 值都具备跨浏览器支持：
preload：Chrome、Firefox、Edge 支持良好；Safari 直到 v16.4 才支持，iOS Safari 更晚modulepreload
：仅 Chromium 115+ 和 Safari 16.4+ 支持，Firefox 尚未实现preconnect / dns-prefetch：主流浏览器均支持，但 preconnect 若滥用（连太多第三方域）反而拖慢首屏manifest：所有支持 PWA 的浏览器都要求此值，但需配合正确的 MIME 类型和 JSON 结构HTML4 文档中硬塞 HTML5 的 rel 值不会导致解析错误（浏览器会忽略不认识的值），但也不会触发对应行为。若需渐进增强，建议用 rel="stylesheet" 保底，再叠加 rel="preload" 等增强逻辑，并配以脚本检测能力（如检查 document.createElement('link').relList.supports）。
真正容易被忽略的是 crossorigin 属性——只要 rel="preload" 加载跨域资源（比如字体、模块），就必须显式声明 crossorigin，否则浏览器会拒绝加载。这个细节错一次，preload 就完全失效。