如何使用 HTML 在新选项卡打开链接

选项卡现在非常普遍，而且很好用，它使我们可以同时处理许多在线任务。你单击一个链接，可能就在新选项卡中打开它。

锚元素

要在网页上创建链接，你需要将元素（文本、图片等）包装在锚点（<a>）元素中，并将其 href 属性设置为要链接的 URL。

<p>Check out <a href="https://www.freecodecamp.org/">freeCodeCamp</a>.</p>

单击上面的链接，浏览器将在当前窗口或选项卡中打开该链接。这是每个浏览器的默认行为。

要在新选项卡中打开链接，我们需要查看锚元素的其他属性。

这个属性告诉浏览器如何打开链接。

要在新选项卡中打开链接，只需将 target 属性设置为 _blank 即可：

<p>Check out <a href="https://www.freecodecamp.org/" target="_blank">freeCodeCamp</a>.</p>

现在，当某人单击该链接时，它将在一个新选项卡中打开，或者可能在一个新窗口中打开，具体取决于其浏览器设置。

我强烈建议你在使用 target 属性时，给锚元素添加 rel="noreferrer noopener"：

<p>Check out <a href="https://www.freecodecamp.org/" target="_blank" rel="noopener noreferrer">freeCodeCamp</a>.</p>

输出如下：

rel 属性设置页面和链接的 URL 之间的关系。将其设置为 noopener noreferrer 是为了防止一种网络钓鱼攻击，即 “tabbabbing”。

tabnabbing 钓鱼攻击是一种漏洞，利用浏览器默认的 target="_blank"，通过 window.object API 访问你的页面的部分内容。

在钓鱼攻击的情况下，你链接到一个页面，可能导致你的页面被重定向到伪造的登录页面。大多数用户很难注意到这一点，因为用户的焦点将集中在刚打开的选项卡上，而不是页面的原始选项卡上。

然后，当用户切换回你的页面（即原始选项卡）时，他们会看到伪造的登录页面，并可能输入其登录详细信息。

如果你想了解更多钓鱼攻击的原理以及坏人如何利用此漏洞，请查看 Alex Yumashev 和 OWASP 的文章。

如果你想看到一个安全的工作示例，请查看此页面及其 GitHub 仓库，了解钓鱼攻击和 rel 属性的更多信息。

使用 HTML 在新选项卡中打开链接很容易，只需要一个锚元素（<a>）及三个重要属性：

完整的示例如下：

<p>Check out <a href="https://www.freecodecamp.org/" target="_blank" rel="noopener noreferrer">freeCodeCamp</a>.</p>

最终输出结果是：

谢谢阅读！