HTML 如何在新标签页打开链接（target _blank）

用 target="_blank" 在新标签页中打开链接

给链接加上 target="_blank"。浏览器会在新标签页中打开目标页面，你的页面保持原样。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>New tab</title>
</head>
<body>
  <p>
    <a href="https://developer.mozilla.org/" target="_blank" rel="noopener">
      MDN web docs
    </a>
    opens in a new tab.
  </p>
</body>
</html>

这就是全部的技巧：在 <a> 上加 target="_blank"，再加上下一节会讲到的 rel="noopener"。读者也可以自己用 Ctrl+点击（Mac 上是 Cmd+点击）或鼠标中键在新标签页中打开任何链接，所以只有在离开页面会让他们有所损失时才使用 target="_blank"，比如填了一半的表单或正在播放的视频。

本页的预览会把所有外部链接都在新标签页中打开，无论有没有 target，因为示例框架绝不能跳转到其他页面。要看 target 带来的区别，把示例保存为文件，再用浏览器打开。

rel="noopener" 和 rel="noreferrer"

用 target="_blank" 打开的页面过去能在 window.opener 中拿到指向你页面的引用，并可以利用它把你的标签页跳转到别的 URL（比如一个伪造的登录页面）。rel="noopener" 会移除这个引用。

当前版本的 Chrome、Firefox 和 Safari 会把每个 target="_blank" 链接都当作 noopener 处理，除非你写了 rel="opener"。即便如此，写上 rel="noopener" 仍然可以保护使用旧浏览器的访客，也让代码的意图一目了然。

noreferrer 还会阻止浏览器发送来源信息，所以你链接到的网站看不到访客来自哪个页面。这是出于隐私而不是安全的考虑：当你的 URL 需要保密时使用它；对于需要看到你带来的流量的合作伙伴，就不要加。

<!-- Safe, the other site still sees the referral -->
<a href="https://example.com" target="_blank" rel="noopener">Example</a>

<!-- Safe, and the other site does not see where the visit came from -->
<a href="https://example.com" target="_blank" rel="noopener noreferrer">Example</a>

rel 可以接受多个以空格分隔的值，所以 noopener 可以与 SEO 相关的值组合使用：付费链接用 rel="noopener sponsored"，你不为之担保的链接用 rel="noopener nofollow"。

告诉用户链接会在新标签页中打开

毫无提示地打开新标签页会让人迷失方向，对使用屏幕阅读器的用户尤其如此，他们可能根本没注意到页面变了。在链接中说明这一点。一个小图标能让看得见的用户知道；隐藏的文字则告诉使用屏幕阅读器的用户：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>New tab hint</title>
  <style>
    .visually-hidden {
      position: absolute;
      width: 1px;
      height: 1px;
      overflow: hidden;
      clip-path: inset(50%);
      white-space: nowrap;
    }
    a[target="_blank"]::after {
      content: " \2197";
      font-size: 0.85em;
    }
  </style>
</head>
<body>
  <p>
    Read the
    <a href="https://www.w3.org/WAI/" target="_blank" rel="noopener">
      accessibility guidelines<span class="visually-hidden"> (opens in a new tab)</span></a>
    before you start.
  </p>
</body>
</html>

a[target="_blank"] 选择器会自动给每个新标签页链接加上箭头，你永远不会漏掉一个。隐藏的 span 会作为链接名称的一部分被读出，即“accessibility guidelines (opens in a new tab)”，但不占屏幕空间。

自动标记所有外部链接

属性选择器可以根据 href 为链接设置样式。这里每个以 http 开头的链接都会带上箭头，站内链接则不会：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>External links</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    a[href^="http"]::after {
      content: " \2197";
      color: #2563eb;
    }
  </style>
</head>
<body>
  <ul>
    <li><a href="/pricing">Pricing</a> (same site)</li>
    <li><a href="/docs">Docs</a> (same site)</li>
    <li><a href="https://github.com/" target="_blank" rel="noopener">GitHub</a></li>
    <li><a href="https://www.w3.org/" target="_blank" rel="noopener">W3C</a></li>
  </ul>
</body>
</html>

^= 的意思是“以……开头”。这个选择器只负责样式：target 和 rel 属性仍然必须写在 HTML 中。

target 的取值

target 指定链接在哪里打开。它有四个关键字，其他任何值都是一个名称：

命名的目标会被重复使用。所有 target="help" 的链接都会在同一个标签页中打开，所以读者点击五个帮助链接，得到的是一个标签页，而不是五个。在 <iframe> 中，如果链接应该替换整个页面而不是框架，就用 _top。

用 base 元素让所有链接在新标签页中打开

在 <head> 中写 <base target="_blank">，可以为页面上的每个链接和表单设置默认的目标：

<head>
  <base target="_blank">
</head>
<body>
  <a href="https://example.com">Opens in a new tab</a>
  <a href="/about" target="_self">Opens in this tab</a>
</body>

链接自己的 target 优先于 <base>。尽量少用这种方式：每个链接都打开新标签页的页面用起来很烦人。

用 JavaScript 打开新标签页

window.open(url, '_blank') 可以在脚本中打开标签页。把 'noopener' 作为第三个参数传入，就能得到与 rel 属性相同的保护。这样一来，window.open 会返回 null，而不是指向新标签页的引用：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>window.open</title>
</head>
<body>
  <button type="button" id="open">Open example.com</button>
  <p id="out"></p>

  <script>
    document.querySelector('#open').addEventListener('click', () => {
      const win = window.open('https://example.com/', '_blank', 'noopener');
      document.querySelector('#out').textContent = 'window.open returned: ' + win;
    });
  </script>
</body>
</html>

除非 window.open 是在响应点击或按键时运行的，否则浏览器会拦截它，所以要在事件监听器中调用它，而不是在页面加载时或定时器之后调用。如果目标 URL 是读者事先就能看到的，用带 target="_blank" 的链接更简单，而且不需要 JavaScript 也能工作。链接本身的用法请看 HTML a 标签。

常见错误

• 写成没有下划线的 target="blank"。 它是一个名称，而不是关键字。第一次仍然会打开新标签页，之后所有同名的链接都会复用那个标签页。
• 写成 target="_new"。 它同样只是一个名称，效果也一样：只有一个被反复使用的标签页。
• 给每个链接都加上 target。 站内链接应该在同一个标签页中打开。想要新标签页的读者知道该怎么做。
• 没有提示链接会在新标签页中打开。 加上图标和隐藏文字。
• 给合作伙伴或联盟推广链接加上 noreferrer，然后奇怪为什么合作方看不到你带去的流量。