必须同时使用 target="_blank"、rel="noopener" 和 rel="noreferrer" 以防范 window.opener 安全风险并保护 Referer 隐私；二者缺一不可，且需配合使用。

rel="noopener" 和 rel="noreferrer" 必须配 target="_blank"

不加 rel 属性的 target="_blank" 链接存在安全风险：新页面可通过 window.opener 访问原页面的 window 对象，可能被用于钓鱼或性能攻击。

正确写法必须同时包含三者：

外部链接

• rel="noopener" 切断 window.opener 引用，防止新页面控制原页面
• rel="noreferrer" 不发送 Referer 头，保护来源隐私（注意：也会让目标站收不到来源信息）
• 两者缺一不可；只写 rel="noopener" 仍会发 Referer，只写 noreferrer 不阻止 window.opener
• Chrome、Firefox、Safari 均支持；IE 不支持 noopener，但 IE 已无实际维护价值

rel="nofollow" 不等于“不抓取”，而是“不传递权重”

SEO 场景下常误以为 rel="nofollow" 能阻止爬虫访问链接，其实它只告诉搜索引擎：“别把我的权重传给这个目标页”。爬虫仍可能抓取该链接，尤其当其他页面有非 nofollow 的指向时。

• 适用场景：用户生成内容中的外链（如评论、论坛帖）、付费推广链接、未审核的投稿链接
• 可组合使用：rel="nofollow noopener noreferrer" 是常见安全+SEO 组合
• Google 自 2025 年起将 nofollow 视为“提示”而非指令，还支持 rel="sponsored"（广告）和 rel="ugc"（用户生成内容）作更细粒度标注

rel="stylesheet" 和 rel="icon" 是 HTML5 中语义最稳定的 link 关系

这两个 rel 值在 标签中属于强制语义化字段，浏览器严格按其含义处理，不是可选修饰。

• ：声明该资源是当前页面的样式表，浏览器会阻塞渲染直到加载并解析完成
• ：指定站点图标，现代浏览器支持多种格式（.png, .svg），推荐加 type 和 sizes 属性提升兼容性
• 错误写法：rel="icon stylesheet"（空格分隔）无效；必须是单值或标准组合如 rel="preload stylesheet"（仅限 as="style" 场景）

自定义 rel 值要谨慎，避免与未来标准冲突

HTML5 允许自定义 rel 值（如 rel="print"），但只有被广泛采用或写入规范的值才有跨浏览器一致行为。

• 已标准化的实用值：rel="author"（指向作者信息页）、rel="license"（指向许可证页）、rel="help"（上下文帮助文档）
• 不要用 rel="tag"：虽曾被部分博客使用，但 HTML Living Standard 已将其标记为“过时”，不再推荐
• 若必须扩展，建议优先用 data- 属性存业务逻辑，把 rel 留给语义明确、有工具链支持的关系类型