必须同时使用 target="_blank"、rel="noopener" 和 rel="noreferrer" 以防范 window.opener 安全风险并保护 Referer 隐私；二者缺一不可，且需配合使用。
rel="noopener" 和 rel="noreferrer" 必须配 target="_blank"
不加 rel 属性的 target="_blank" 链接存在安全风险：新页面可通过 window.opener 访问原页面的 window 对象，可能被用于钓鱼或性能攻击。
正确写法必须同时包含三者：
<a href="https://example.com" target="_blank" rel="noopener noreferrer">外部链接</a>
-
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 自 2020 年起将
nofollow视为“提示”而非指令，还支持rel="sponsored"（广告）和rel="ugc"（用户生成内容）作更细粒度标注
rel="stylesheet" 和 rel="icon" 是 HTML5 中语义最稳定的 link 关系
这两个 rel 值在 <link> 标签中属于强制语义化字段，浏览器严格按其含义处理，不是可选修饰。
立即学习“前端免费学习笔记（深入）”；
-
<link rel="stylesheet" href="style.css">：声明该资源是当前页面的样式表，浏览器会阻塞渲染直到加载并解析完成 -
<link rel="icon" href="favicon.ico">：指定站点图标，现代浏览器支持多种格式（.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留给语义明确、有工具链支持的关系类型
noopener —— 尤其在 CMS 或富文本编辑器输出的链接中，target="_blank" 往往自动加上，但 rel 却没跟上。这个细节既影响安全，又影响 Lighthouse 评分。 
