HTML的a标签超链接 HTML的a标签target属性详解

target="_blank"必须搭配rel="noopener noreferrer"才安全，否则新页面可通过window.opener劫持原页面；合法target值仅_self、_blank、_parent、_top和framename五类。

target="_blank" 是唯一可靠且语义明确的新标签页打开方式；但单独使用它等于留后门，必须搭配 rel="noopener noreferrer" 才算安全落地。

为什么 target="_blank" 必须配 rel="noopener noreferrer"

不加 rel="noopener" 时，新页面可通过 window.opener 直接控制原页面跳转、读取 DOM，甚至执行恶意重定向。这不是理论风险——攻击者只需在链接目标页写一行 window.opener.location = "https://fake-login.example"，就能把你的用户劫持走。

常见错误包括：

• target="blank"（漏下划线）→ 浏览器当普通字符串处理，等同于 target="_self，当前页跳转
• target="_new" 或 target="new" → 非标准值，所有现代浏览器都忽略，退化为 _self
• 只加 rel="noopener" 却漏掉 noreferrer → Referer 头仍会泄露来源 URL，影响隐私

target 的合法值到底有哪些

W3C 和 HTML Living Standard 明确只承认以下五类值：

立即学习“前端免费学习笔记（深入）”；

• _self：默认行为，当前标签页加载（可省略）
• _blank：唯一推荐用于“新开页”的值
• _parent：仅在嵌套 <iframe> 场景中有效，指向父级上下文
• _top：跳出所有 iframe 层级，在顶层窗口加载
• framename：匹配页面中某个 <iframe name="xxx">，现已极少使用

像 _window、_newtab、new 这类写法，浏览器不会报错，但也不会生效——它们只是被当作自定义窗口名，而由于对应窗口不存在，最终仍 fallback 到 _self。

Vue/React 里写 <a> 标签容易踩的坑

框架不改变 HTML 语义，但容易因绑定方式绕过原生行为：

• 用 @click.prevent="window.open(url)" 替代 <a href="..." target="_blank"> → 右键菜单丢失“复制链接地址”，SEO 不识别，且 SSR 环境直接报 ReferenceError: window is not defined
• 动态生成 href 时未校验，导致 href="undefined" 或 href="javascript:void(0)" → 点击无响应或触发意外 JS 行为
• 在 <router-link> 或 <Link> 中硬塞 target → 这些组件不支持该属性，会被忽略，必须退回到原生 <a>

可访问性与用户体验的隐性成本

屏幕阅读器会播报 target="_blank"，但不会自动说明“将在新标签页打开”。用户可能误以为当前页会跳转，结果发现原页面还在，新页又没注意——尤其对低视力或认知障碍用户更不友好。

所以实际项目中建议：

• 外部链接才用 target="_blank"；站内导航一律保持 _self
• 在链接文本后加视觉提示，比如 External site (opens in new tab)，或用 aria-label 补充语义：<a href="..." target="_blank" rel="noopener noreferrer" aria-label="Example website (opens in new tab)">Example</a>
• 避免批量给所有外链加 _blank——用户手机端开一堆标签页后，内存和电池压力是真实存在的

真正难的不是写出 target="_blank"，而是判断“这个链接到底该不该新开页”，以及确保它新开得干净、安全、可感知。