2025年2月24日 星期一 甲辰(龙)年 腊月廿四 设为首页 加入收藏
rss
您当前的位置:首页 > 计算机 > 编程开发 > Html+Div+Css(前端)

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

时间:01-23来源:作者:点击数:21
城东书院 www.cdsy.xyz

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

城东书院 www.cdsy.xyz
方便获取更多学习、工作、生活信息请关注本站微信公众号城东书院 微信服务号城东书院 微信订阅号
推荐内容
相关内容
栏目更新
栏目热门
本栏推荐