HTML4中rel合法值极少且仅用于，仅stylesheet和shortcut icon被广泛支持；HTML5大幅扩展rel语义，新增preload、prefetch、preconnect、icon、manifest等值以支持现代Web功能，并标准化nofollow、noopener、noreferrer等行为，但需注意浏览器兼容性及crossorigin等配套属性。
HTML4 中 rel 的合法值非常有限
HTML4.01 严格只定义了几个语义明确的 rel 值，且仅用于 <link>（不用于 <a></a> 或 <area>）。浏览器实际支持更宽泛，但标准只认：stylesheet、start、next、prev、contents、index、glossary、copyright、chapter、section、subsection。其中绝大多数在现实中几乎没人用，真正被广泛支持和依赖的只有：stylesheet（加载 CSS）、shortcut icon（非标准但被 IE 带火的写法，后来被 HTML5 正式收编为 icon）。
HTML5 新增的 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 时代就被部分浏览器实现（尤其用于 <a></a>），但 HTML5 第一次将其写入规范，并明确定义行为：
-
nofollow：告诉搜索引擎不要传递权重，也不应抓取目标页（注意：它对<link>的作用未被规范明确定义，实践中极少用于<link>） -
noopener：在target="_blank"场景下防止新页面通过window.opener访问原页面，提升安全性（仅对<a></a>有效，<link>不适用） -
noreferrer：既阻止 referrer 发送，也隐含noopener效果
这些值在 <link> 中基本无意义，属于“被 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）。
<link rel="stylesheet" href="main.css"> <link rel="preload" as="font" type="font/woff2" href="font.woff2" crossorigin> <link rel="manifest" href="/manifest.webmanifest">
真正容易被忽略的是 crossorigin 属性——只要 rel="preload" 加载跨域资源（比如字体、模块），就必须显式声明 crossorigin，否则浏览器会拒绝加载。这个细节错一次，preload 就完全失效。
