rel属性是决定浏览器行为与安全的关键属性，必须配合target="_blank"才生效；单独使用rel="noopener"无效，需显式声明以防止reverse tabnabbing攻击，且现代最佳实践为rel="noopener noreferrer"。
rel 属性不是可有可无的装饰，它直接决定浏览器是否加载资源、如何加载、是否参与渲染、是否影响安全上下文，甚至被搜索引擎当作语义信号。用错值，轻则资源不加载，重则引入 XSS 风险或破坏预加载逻辑。
为什么 a 标签加了 rel 但没效果？
常见现象是写了 @#@#@#@#@#@#@#@#@#@0，却仍能通过 window.opener 访问原页面——这是因为 rel="noopener" 只在配合 target="_blank" 时才生效。
-
rel="noopener"和rel="noreferrer"对<a></a>标签无效，除非同时存在target="_blank"（或target="_new"等非_self值） - 单独写
rel="noopener"不会报错，但浏览器直接忽略该属性 - Chrome 88+ 开始，即使没写
rel，target="_blank"也会默认启用noopener行为；但 Safari、Firefox 仍需显式声明 - 若只关心隐私不关心安全，可用
rel="noreferrer"，它会清空document.referrer，但不切断window.opener
rel="nofollow" 在 a 标签里到底管不管用？
它确实影响搜索引擎，但不是“禁止跳转”，而是告诉爬虫：“这个链接我不背书”。用户点击照常跳转，JS 也能正常触发。
-
rel="nofollow"是 Google、Bing 等主流引擎识别的通用标准，但仅对出站链接有意义；内部链接加它基本无效 - 2021 年起 Google 将
rel="nofollow"视为“提示”而非指令，更推荐用rel="sponsored"（付费广告）或rel="ugc"（用户生成内容）替代 - 多个值可共存：
rel="nofollow ugc"合法且常见，等价于两个独立语义叠加 - 注意拼写：写成
rel="no-follow"或rel="NOFOLLOW"都无效——必须小写、无连字符、空格分隔
rel="noopener noreferrer" 要不要一起写？
要，但得理解各自作用：前者防 XSS，后者保隐私，二者不互斥，也不冗余。
-
rel="noopener"切断新页面对window.opener的访问权限，防止恶意页面调用opener.location.replace()劫持原页 -
rel="noreferrer"同时禁用Referer请求头和document.referrer，比noopener更彻底地隐藏来源 - 如果只写
rel="noreferrer"，它会隐式包含noopener效果（多数现代浏览器），但语义不明确，建议显式并列书写 - 实操中优先用
rel="noopener noreferrer"，尤其在 CMS、评论区、富文本编辑器等用户可插入链接的场景
哪些 rel 值在 a 标签里根本没意义？
不是所有 rel 值都适用于超链接；有些只对 <link> 有效，硬套到 <a></a> 上纯属浪费字节。
-
rel="stylesheet"、rel="icon"、rel="preload"、rel="prefetch"—— 这些是<link>专属，<a></a>标签上出现会被忽略 -
rel="next"、rel="prev"、rel="canonical"虽然语法合法，但只在<link>中被浏览器/阅读器识别；放在<a></a>里仅对 SEO 工具链可能有弱信号，实际无行为 -
rel="author"、rel="help"、rel="license"理论上可用于<a></a>，但目前没有任何主流浏览器或辅助技术消费它们 - 真正值得在
<a></a>上用的，就那么几个：noopener、noreferrer、nofollow、sponsored、ugc、bookmark（用于 permalink）
rel 是 DOMTokenList 类型，支持 JS 动态增删，比如 link.relList.add("prefetch")，但 <a></a> 标签上的 rel 修改不会触发任何资源加载行为——它只在初始解析时起效。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
