HTML5：超链接和新标签

Posted 2023-02-22

【中文标题】HTML5：超链接和新标签

【英文标题】：HTML5: hyperlink and new tab

【发布时间】：2014-02-04 14:59:46

【问题描述】：

我有这个超链接代码：

<a href="http://www.youtube.com/user/mamgrow"><img style="position:relative; float:right; height:30px; left:-30px;"   src="images/facebook.png"/></a>

我希望此链接在新标签页中打开...

我试着把它放进去：

style="target-new:tab;

但它没有用。有什么想法吗？

【问题讨论】：

Open link in new tab的可能重复

wauw：一个 CSS3 选项，0 浏览器支持

【参考方案1】：

扩展 @ztirom 的答案...

Mozilla Developer Network 说：

目标

指定显示链接 URL 的位置。它是浏览上下文的名称或关键字：选项卡、窗口或

_self：将 URL 加载到与当前浏览上下文相同的浏览上下文中。这是默认行为。

_blank：将 URL 加载到新的浏览上下文中。这通常是一个选项卡，但用户可以将浏览器配置为使用新窗口。

_parent：将 URL 加载到当前浏览器的父浏览上下文中。如果没有父级，则其行为方式与 _self 相同。

_top：将 URL 加载到***浏览上下文（即“最高”浏览上下文，它是当前浏览上下文的祖先，并且没有父级）。如果没有父浏览上下文，则其行为方式与 _self 相同。

注意：使用 target 时，请考虑添加 rel="noopener noreferrer" 以避免对 window.opener API 的利用。

【参考方案2】：

您可以轻松地使用target 属性，例如：

<a href="http://www.example.com" target="_blank"><img src="your/image" /></a>

如果您的用户的浏览器支持选项卡，则链接页面将在活动浏览器窗口中的新选项卡中打开（如果设置） - 大多数情况下这是默认设置。 今天几乎每个浏览器都支持这一点。有关详细信息，请参阅Wikipedia 上的此列表。

这里是 html 中 <a> 标记中 target 属性的列表：

target="_blank" <!-- opens link in a new window -->
target="_self" <!-- opens link in actual window -->
target="_parent"
target="_top" <!-- both handle frames -->

这部分代码：

style="target-new:tab;

没有效果，任何现代浏览器似乎都不是supported。

【参考方案3】：

阅读 w3schools 说明解释了在新选项卡或窗口中打开链接的语法（取决于网络浏览器中的设置）您应该添加属性

target="_blank"

http://www.w3schools.com/html/html_links.asp

【参考方案4】：

您应该使用以下代码在新窗口中打开

<a href="http://www.google.com" target="_blank">...</a>