原文： How to Open a Link in a New Tab – HTML target blank Attribute Explained

有些时候，你会希望你的用户点击一个网站链接，并在一个新的浏览器标签页中打开它。但你如何在 HTML 中做到这一点呢？

在这篇文章中，我将通过代码实例告诉你如何使用 target="_blank" 属性。我还将谈到什么时候你应该考虑使用这个属性。

如何使用 target="_blank" 打开一个新的标签页

应该在锚标签开始标签内使用 target="_blank" 属性，像这样：

<a href="website-link-goes-here" target="_blank">

当用户点击该链接时，将自动在一个新的浏览器标签页打开该页面。

在这个例子中，我在一组段落标签中嵌套了一个链接，以引导人们到 freeCodeCamp。

<p>To learn how to code for free, please visit <a href="https://www.freecodecamp.org/learn" target="_blank">freeCodeCamp.org</a></p>

当你点击 freeCodeCamp 的链接时，它将为你打开一个新的浏览器标签页。

如果我省略 target="_blank"  属性，那么默认行为就是离开当前网页，直接进入该链接，而不打开新的浏览器标签页。

noopener 关键词是什么

rel 属性中的 noopener 关键词主要是出于安全考虑，以防止恶意用户通过 Window.opener 属性对原始网页进行破坏。如果恶意用户获得了对你的窗口对象的访问权，那么他们可以将你的页面重定向到一个恶意的 URL。

你可以使用 noopener 关键词来防止这种安全问题发生。下面是 noopener 关键词的使用方法：

<a target="_blank" rel="noopener" href="https://devdocs.io/html/element/heading_elements">DevDocs documentation</a>

如果你想了解更多关于 rel=noopener 帮助解决安全问题的信息，请阅读这篇有帮助的文章。

对 noopener 关键词的更新

在 2021 年，有一个更新，现代浏览器现在对任何使用 target=_blank 属性的链接设置 rel=noopener。正如你在这个“我可以使用吗”表中所看到的，除了 Internet Explorer 11，大多数浏览器都支持 noopener 关键词。

即使有了这个更新，很多开发者仍然会对使用 target=_blank 属性的链接使用 rel=noopener。

你应该一直使用 target="_blank" 属性吗

当用户点击一个链接时，默认行为是让该链接在用户所在的当前页面上打开，而不打开一个新的浏览器标签页。在很多情况下，你并不想改变这种默认行为，因为用户已经习惯了这种行为。

你必须仔细考虑何时是使用 target="_blank" 属性的好时机。一个很好的例子是，如果用户正在一个页面上工作，如果她们点击了一个链接，她们不想离开这个页面。

在这个例子中，我们正在链接到 DevDocs 文档，所以用户可以留在他们当前的页面上，在新的标签页上查找参考资料。

总结

如果你希望你的用户点击一个链接，打开一个新的浏览器标签页，你可以使用 target="_blank" 属性。

target="_blank" 属性是在锚标签开始标签内使用的，像这样：

<a href="website-link-goes-here" target="_blank">

在 rel 属性中添加 noopener 关键词是为了防止恶意用户通过 Window.opener 属性来扰乱原始网页。

<a target="_blank" rel="noopener" href="link-goes-here">

你必须仔细考虑何时是使用 target="_blank" 属性的好时机，因为你不希望总是改变链接的默认行为。

我希望你喜欢这篇文章，祝你在编程之旅中好运。