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

你好,我是云桃桃。聊完 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",避免出现未经用户允许的弹出窗口,并确保提供良好的用户体验。

好了,以上,本文完。

作者介绍:

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

相关推荐
小约翰仓鼠几秒前
vue3子组件获取并修改父组件的值
前端·javascript·vue.js
Lin Hsüeh-ch'in2 分钟前
Vue 学习路线图(从零到实战)
前端·vue.js·学习
烛阴18 分钟前
bignumber.js深度解析:驾驭任意精度计算的终极武器
前端·javascript·后端
计蒙不吃鱼25 分钟前
一篇文章实现Android图片拼接并保存至相册
android·java·前端
全职计算机毕业设计1 小时前
基于Java Web的校园失物招领平台设计与实现
java·开发语言·前端
你的人类朋友1 小时前
✍️Node.js CMS框架概述:Directus与Strapi详解
javascript·后端·node.js
啊~哈1 小时前
vue3+elementplus表格表头加图标及文字提示
前端·javascript·vue.js
xiaogg36781 小时前
vue+elementui 网站首页顶部菜单上下布局
javascript·vue.js·elementui
weixin_527550401 小时前
初级程序员入门指南
javascript·python·算法
小小小小宇2 小时前
前端小tips
前端