rel属性是标签的强制属性，漏写或错写会导致资源不加载、链接失效或安全防护失效；stylesheet唯一触发css加载，preload需as属性，noopener/noreferrer仅对a标签有效。
rel 属性不是可有可无的装饰，它是 <link> 标签的强制属性（HTML5 中除 rel="canonical" 等少数例外，但实践中几乎所有合法用法都要求它）。没写 rel，浏览器可能忽略该 <link>，或按默认行为降级处理——比如当成普通样式表加载，而丢失语义。
哪些 rel 值是浏览器真正识别并执行的
浏览器只对有限几个 rel 值有原生行为，其余多数仅作语义标记（供爬虫、插件或开发者工具识别）：
-
stylesheet：唯一能触发 CSS 下载与应用的值。必须配href指向 .css 文件，且type="text/css"在现代 HTML 中可省略 -
icon（含rel="shortcut icon"兼容写法）：用于 favicon。注意sizes属性仅在rel="icon"时生效，且多个<link rel="icon">可共存，浏览器按sizes和type自动选最优 -
preload：主动预加载关键资源（如字体、JS、图片），需显式指定as属性，否则可能被忽略或降级为prefetch -
preconnect、dns-prefetch：提前建立连接或解析域名，不带href时无效；preconnect更激进，会建立 TLS 握手，慎用于第三方域名
rel="noopener" 和 rel="noreferrer" 不该出现在 <link> 里
这两个值是专为 <a target="_blank"></a> 设计的安全补丁，用于阻断 window.opener 访问和 referrer 泄露。它们在 <link> 标签中无意义，浏览器完全忽略。若你在 <link> 上写了 rel="noopener"，说明你混淆了 <a></a> 和 <link> 的用途。
-
<link>不触发导航，不存在 opener 风险 - referrer 控制应通过
referrerpolicy属性实现，例如：<link rel="stylesheet" href="main.css" referrerpolicy="no-referrer">
SEO 和语义类 rel 值的实际影响
这些值不改变页面渲染，但会影响搜索引擎、阅读器或扩展的行为：
-
canonical：告诉搜索引擎当前页的规范 URL，必须指向自身或等效页，否则可能被忽略或导致索引混乱 -
alternate：配合hreflang使用才有效，单独写rel="alternate"几乎无用；常见错误是漏写hreflang或语言代码格式错误（如写成zh-CN而非zh-Hans） -
author、help、license：纯语义，现代浏览器不提供 UI 支持，但部分 RSS 阅读器或无障碍工具会读取 -
next/prev：仅在分页列表中有效（如博客归档），且要求href指向真实分页 URL，不能是 JS 路由生成的 hash 地址
最容易被忽略的是 rel 的大小写敏感性：HTML 规范要求小写，虽然浏览器大多宽容，但某些静态站点生成器或校验工具（如 W3C Validator）会报错。写成 Rel="stylesheet" 或 REL="icon" 属于无效值。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
