你好，我是云桃桃。聊完 a 标签的 href 属性，接下来，聊一下 a 标签的 target 属性。
HTML 链接的 target 属性用于指定链接在何处打开，它决定了点击链接时的页面行为。常见的 target 属性值有 4 个情况，那我们依次来说一下。
注意：里面涉及的链接，你可以用你常用或者喜欢的任意地址，在这里为了避免平台敏感，写的只是示范地址的英文。
target 属性的 4 种值
1、_self： 在当前窗口中打开链接（默认就是这个模式，无需写上了）。
<a href="https://www.example.com" target="_self">链接</a>适用于在同一窗口中打开链接，不需要新开标签或窗口的情况。
2、_blank： 在新的窗口或标签页中打开链接。
<a href="https://www.example.com" target="_blank">链接</a>
适用于需要在新标签页或新窗口中打开链接，保留原页面的浏览，并让用户保持在跳转的最新页面的情况。其实，我们打开百度搜索并点开一条信息，也是新开了一个窗口，也是使用这种方式。
3、_parent：和 _top：
这 2 者，都适用于嵌套框架 <iframe>标签 中的情况。
_parent： 是在父窗口中打开链接。_top： 是在最顶层的窗口中打开链接，适用于嵌套框架 <iframe>标签 中的情况，忽略所有嵌套的框架。
iframe 是是什么？<iframe> 就像是页面中的一个小窗口，可以显示另一个网页的内容。通过指定 src 属性，我们可以告诉浏览器要在 <iframe> 中加载哪个网页。
当我们想要在一个网页中嵌入另一个网页时，可以使用 <iframe> 标签。<iframe> 标签允许我们在当前页面中创建一个内联框架，用来显示其他网页的内容。
ok，举个例子，假设我们有一个页面结构如下：
index.html
<!DOCTYPE html>
<html>
<head>
<title>主页面</title>
</head>
<!-- frameset c中用来定义框架集合的标签。在这个例子中，`cols="20%,80%"` 表示框架集合被水平分割成两列，第一列占总宽度的 20%，第二列占总宽度的 80%。
这样的布局可以用来实现网页的分栏效果，其中一个列用于显示导航栏或侧边栏，另一个列用于显示主要内容。 -->
<frameset cols="20%,80%">
<frame style="background: rgb(164, 231, 169);" src="navigation.html" name="leftFrame">
<frame src="childPage1.html" name="rightFrame">
</frameset>
</html>
childPage1.html
<!DOCTYPE html>
<html>
<head>
<title>内容页面</title>
</head>
<body>
<h1>内容页面</h1>
<p>hello</p>
<iframe src="childpage2.html" frameborder="0"></iframe>
</body>
</html>
childPage2.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<p>
<a href="https://www.example.com" target="_parent">在父级窗口中打开链接</a>
</p>
<p>
<a href="https://www.example.com" target="_top">在顶级窗口中打开链接</a>
</p>
</body>
</html>
代码解释：
现在，我们有一个链接在 childPage1.html 中，在page1里面还有一个childPage2.html 。
1、<a href="https://www.example.com" target="_parent">在父级窗口中打开链接</a>：
这个链接指向了网址 https://www.example.com。使用了 target="_parent" 属性，表示当用户点击这个链接时，链接会在当前页面的父级窗口中打开。
在这个示例中，因为主页面包含了一个嵌套的框架，所以链接会在嵌套框架的父级页面childPage1.html中打开，也就是地址栏没有变化，在右侧区域块打开，如图。
2、 <a href="https://www.example.com" target="_top">在最顶层窗口中打开链接</a>：而这个 target="_top" 属性，表示当用户点击这个链接时，链接会在整个浏览器窗口的最顶层打开，覆盖掉任何嵌套框架或者页面，地址栏已经变成了href后面的地址，如图。
总之，_parent 和 _top 的区别在于打开链接的窗口不同。_parent 是打开链接在父级窗口中，而 _top 是打开链接在最顶级的窗口中，无论当前页面是否有嵌套框架。
总结
另外，对于 target 属性的使用注意事项包括：
对于使用 _blank 打开的链接，应该在合适的场景下添加 rel="noopener noreferrer" 属性，以防止被打开的页面访问原页面的 window 对象，提高安全性。
在使用 JavaScript 打开新窗口时，应当小心使用 target="_blank"，避免出现未经用户允许的弹出窗口，并确保提供良好的用户体验。
好了，以上，本文完。
作者介绍：
云桃桃，在写作的程序媛。终身学习者，陪你一起编程，一起写作❤️
519
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
