rel属性影响seo、预加载、安全及渲染：preload强制加载关键资源，prefetch低优先级预取，preconnect提前建连，dns-prefetch仅查dns；noopener防xss，noreferrer禁referer；canonical声明规范url，next/prev标识分页，alternate支持rss/多语言；stylesheet仅用于link，author已废弃，nofollow对站内链接无效，多值须空格分隔。
rel 属性不是装饰用的，它告诉浏览器“这个链接和当前文档是什么关系”——用错值可能影响 SEO、预加载行为、安全策略甚至页面渲染。
哪些 rel 值会影响页面预加载和资源获取
浏览器会根据 rel 值决定是否提前获取目标资源，或如何处理跳转上下文：
-
rel="preload"：强制提前加载关键资源（如字体、JS），但必须搭配as属性，否则可能被忽略；as="font"和as="script"的加载优先级、CORS 要求都不同 -
rel="prefetch"：低优先级后台预取，仅在空闲时触发，适合下一屏可能用到的资源；不保证执行，也不阻塞主流程 -
rel="preconnect"：提前建立 DNS + TCP + TLS 连接，对跨域 CDN 很有用；但别滥用，每个preconnect会占用一个连接池 slot -
rel="dns-prefetch"：只做 DNS 查询，开销最小；适合明确知道要访问但暂不加载的域名（如统计域名）
哪些 rel 值会改变新窗口/标签页的安全上下文
点击链接打开新页面时，rel 直接控制子页面能访问多少父页面信息：
-
rel="noopener"：必须加在所有target="_blank"链接上，否则子页面可通过window.opener访问并篡改父页面（XSS 风险） -
rel="noreferrer"：进一步禁用Referer头，同时隐式包含noopener；但会丢失来源分析数据，慎用于内部跳转 -
rel="noopener noreferrer"是最常见组合，既保安全又防追踪；注意顺序无关，但两个值都要写全
哪些 rel 值被搜索引擎或阅读器识别为语义化导航
这些值不直接影响运行时行为，但会被爬虫、RSS 阅读器或无障碍工具解析：
-
rel="canonical"：声明规范 URL，解决重复内容问题；必须放在中，且 href 必须是绝对路径 -
rel="next"/rel="prev"：标识分页序列，帮助 Google 理解内容结构；仅适用于线性分页（如 /page/1、/page/2），不能用于标签页或筛选结果 -
rel="alternate"：用途复杂，常见搭配有：type="application/rss+xml"（订阅源）、hreflang="zh"（多语言版本）、media="print"（打印样式表）
容易被忽略但实际出问题的细节
很多 rel 值看似简单，一写错就失效：
-
rel="stylesheet"只能用于<link>标签引入 CSS，用在<a></a>上毫无意义 -
rel="author"已被 Chrome 废弃，Firefox 也仅保留兼容；现在应通过<meta name="author">或 JSON-LD 表达作者信息 -
rel="nofollow"对站内链接基本无效（Google 不再视其为传递权重信号），主要用在用户生成内容（UGC）的外链上防垃圾 - 多个值之间用空格分隔，不是逗号：
rel="noopener noreferrer"✅，rel="noopener, noreferrer"❌
真正麻烦的不是记不住有哪些值，而是同一个 rel 在不同标签（<a></a> vs <link>）、不同上下文（HTML 文档 vs HTTP Link 头）、不同浏览器中表现不一致——用之前最好查下 WHATWG 官方 link types 列表，别只看 MDN 摘要。
