HTML基础：超链接之target属性的4种值详解

你好，我是云桃桃。聊完 a 标签的 href 属性，接下来，聊一下 a 标签的 target 属性。

HTML 链接的 target 属性用于指定链接在何处打开，它决定了点击链接时的页面行为。常见的 target 属性值有 4 个情况，那我们依次来说一下。

注意：里面涉及的链接，你可以用你常用或者喜欢的任意地址，在这里为了避免平台敏感，写的只是示范地址的英文。

target 属性的 4 种值

1、_self： 在当前窗口中打开链接（默认就是这个模式，无需写上了）。

复制代码

链接

适用于在同一窗口中打开链接，不需要新开标签或窗口的情况。

2、_blank： 在新的窗口或标签页中打开链接。

复制代码

链接

适用于需要在新标签页或新窗口中打开链接，保留原页面的浏览，并让用户保持在跳转的最新页面的情况。其实，我们打开百度搜索并点开一条信息，也是新开了一个窗口，也是使用这种方式。

3、_parent：和 _top：

这 2 者，都适用于嵌套框架

childPage2.html

复制代码

在父级窗口中打开链接

在顶级窗口中打开链接

代码解释：

现在，我们有一个链接在 childPage1.html 中，在page1里面还有一个childPage2.html 。

1、在父级窗口中打开链接：

这个链接指向了网址 https://www.example.com。使用了 target="_parent" 属性，表示当用户点击这个链接时，链接会在当前页面的父级窗口中打开。

在这个示例中，因为主页面包含了一个嵌套的框架，所以链接会在嵌套框架的父级页面childPage1.html中打开，也就是地址栏没有变化，在右侧区域块打开，如图。

2、 在最顶层窗口中打开链接：而这个 target="_top" 属性，表示当用户点击这个链接时，链接会在整个浏览器窗口的最顶层打开，覆盖掉任何嵌套框架或者页面，地址栏已经变成了href后面的地址，如图。

总之，_parent 和 _top 的区别在于打开链接的窗口不同。_parent 是打开链接在父级窗口中，而 _top 是打开链接在最顶级的窗口中，无论当前页面是否有嵌套框架。

总结

另外，对于 target 属性的使用注意事项包括：

对于使用 _blank 打开的链接，应该在合适的场景下添加 rel="noopener noreferrer" 属性，以防止被打开的页面访问原页面的 window 对象，提高安全性。

在使用 JavaScript 打开新窗口时，应当小心使用 target="_blank"，避免出现未经用户允许的弹出窗口，并确保提供良好的用户体验。

好了，以上，本文完。

作者介绍：

云桃桃，在写作的程序媛。终身学习者，陪你一起编程，一起写作❤️