a标签target属性详解(超链接a标签target属性有哪些)

 分类:html知识时间:2022-10-11 07:30:01点击:

在前端开发中,有很多标签其实有很多不同的功能,但是用到的不多,所以就没有发现;当发现的时候,觉得很不可思议,有耳目一新的感觉。例如a 标签,之前只是知道,使用a标签,可以打开一个链接,然后访问一个新的页面。之前使用的时候,也没有管那么多,就直接使用了,突然发现,a标签的用法,其实不仅仅可以在一个新页面中打开一个网页那么简单。当然了,这里最主要的,只涉及了一个target属性;单单这个target 属性,就有好几个值。下面就看看,到底有哪些值?

a标签target属性详解

超链接a标签target属性有哪些

1. target = _self  ,这是默认属性,也是用得最多的,表示在新窗口中打开链接的内容

2.target = _parent  , 当等于这个值时候,表示在父级框架中打开连接的内容

3.target = _blank ,当等于这个属性时,表示在新窗口中打开链接的内容

4.target = _top ,表示在顶级框架中,打开链接的内容

5. target= bodyframe ,当target 等于bodyframe 属性时,表示在bodyframe 这个框架中打开链接。  ***备注:这里的 bodyframe 是框架的名字,这里a 标签要搭配一个框架标签 iframe标签来使用*** ,如果没有iframe 框架标签,会在新窗口中打开一个链接

6.target = view_window , 当target = view_window 时,会在新窗口中打开链接,这里可以多个链接都加入 target=view_window 属性,当都加入这个属性时,这些a标签的链接都会映射到这个view_window 窗口之中,如果第一次打开没有关闭view_window,那么下次再点击a标签的时候,就会在当前打开的view_window 窗口中显示链接的内容,可以达到不改变窗口,而改变内容的效果


1.定义

<a> 标签的 target 属性规定在何处打开链接文档。

如果在一个 <a> 标签内包含一个 target 属性,浏览器将会载入和显示用这个标签的 href 属性命名的、名称与这个目标吻合的框架或者窗口中的文档。如果这个指定名称或 id 的框架或者窗口不存在,浏览器将打开一个新的窗口,给这个窗口一个指定的标记,然后将新的文档载入那个窗口。从此以后,超链接文档就可以指向这个新的窗口。

2.用法

2.1 打开新窗口

被指向的超链接使得创建高效的浏览工具变得很容易。例如,一个简单的内容文档的列表,可以将文档重定向到一个单独的窗口:

<ul>
  <li>
    <a href="https://www.csdn.net" target="view_frame">
      CSDN - 专业开发者社区
    </a>
  </li>
  <li>
    <a href="https://www.baidu.com" target="view_frame">
      百度一下,你就知道
    </a>
  </li>
</ul>

CSDN - 专业开发者社区

百度一下,你就知道

当用户第一次选择内容列表中的某个链接时,浏览器将打开一个新的窗口,将它标记为 "view_window",然后在其中显示希望显示的文档内容。如果用户从这个内容列表中选择另一个链接,且这个 "view_window" 仍处于打开状态,浏览器就会再次将选定的文档载入那个窗口,取代刚才的那些文档。

2.2 在框架(frame)中打开窗口

不用打开一个完整的浏览器窗口,使用 target 更通常的方法是在一个 显示中将超链接内容定向到一个或者多个frame中。可以将这个内容列表放入一个带有两个frame的文档的其中一个frame中,并用这个相邻的frame来显示选定的文档:

<frameset cols="100,*">
  <frame src="left.html">
  <frame src="right.html" name="view_frame">
</frameset>

当浏览器最初显示这两个frame的时候,左边这个frame包含目录,右边这个frame包含前言。

👇是 “left.html” 的源代码:

<ul>
  <li>
    <a href="https://www.csdn.net" target="view_frame">CSDN - 专业开发者社区</a>
  </li>
  <li>
    <a href="https://www.baidu.com" target="view_frame">百度一下,你就知道</a>
  </li>
</ul>

请注意,在文档 “left.html” 中,每个链接的目标都是 “view_frame”,也就是右边的frame。

2.3 特殊的目标

有 4 个保留的目标名称用作特殊的文档重定向操作:

_blank

浏览器总在一个新打开、未命名的窗口中载入目标文档。

<a href="https://www.csdn.net" target="_blank">CSDN - 专业开发者社区</a>

_blank打开:CSDN - 专业开发者社区

_self

这个目标的值对所有没有指定目标的 <a> 标签是默认目标,它使得目标文档载入并显示在相同的框架或者窗口中作为源文档。这个目标是多余且不必要的,除非和文档标题 <base> 标签中的 target 属性一起使用。

<a href="https://www.csdn.net" target="_self">CSDN - 专业开发者社区</a>

_self打开:CSDN - 专业开发者社区

_parent

这个目标使得文档载入父窗口或者包含来超链接引用的框架的框架集。如果这个引用是在窗口或者在顶级框架中,那么它与目标 _self 等效。

<a href="https://www.csdn.net" target="_parent">CSDN - 专业开发者社区</a>

_parent打开:CSDN - 专业开发者社区

_top

这个目标使得文档载入包含这个超链接的窗口,用 _top 目标将会清除所有被包含的框架并将文档载入整个浏览器窗口。

<a href="https://www.csdn.net" target="_top">CSDN - 专业开发者社区</a>

_top打开:CSDN - 专业开发者社区

【提示】:这些 target 的所有 4 个值都以下划线开始。任何其他用一个下划线作为开头的窗口或者目标都会被浏览器忽略,因此,不要将下划线作为文档中定义的任何框架 name 或 id 的第一个字符。

除注明外的文章,均为来源:老汤博客,转载请保留本文地址!
原文地址: