<a>标签的target意思很明确就是在哪里打开目标文档。

第一种情况:

默认情况:当我们没有设置超链接属性target的value值时默认是_self,即<a target="_self">。它使目标文档显示在超链接所在架或者窗口中。所以下面两行代码效果相同。

<a href="http://www.baidu.com">百度</a>
<a href="http://www.baidu.com" target="_self">百度</a>

第二种情况:

给一堆超链接以相同的target值,这种方式可以使得一组超链接在同一窗口打开,即通过单击一个窗口中的不同链接控制另一窗口内容变化。首先,浏览器会找与target值相符的框架或者窗口中的文档,有则在其中显示文档。如果不存在,浏览器打开一个新窗口,给其指定一个标识为target值,之后只要该窗口不关闭,其它超链接就可以指向这个新窗口。

<ul>
<li><a href="http://www.google.com.hk" target="HelloWorld">google</a></li>
<li><a href="http://cn.bing.com" target="HelloWorld">必应</li>
<li><a href="http://www.baidu.com" target="HelloWorld">百度</a></li>
<li><a href="http://www.soso.com" target="HelloWorld">搜搜</a></li>
</ul>

第三种情况:

在框架中使用,现在有3个页面,一个father.html,一个son1.html,一个son2.html。father页面承载son1和son2,实现选择son1中不同链接,在son2中动态变化。【//lxy:frameset和frame在html5中已经被弃用了】

father.html代码:

<frameset cols="30%,*">
<frame src="son1.html">
<frame src="son2.html" name="son2">
</frameset>

son1.html代码:

<body>
<h1>son1</h1>
<ul>
<li><a href="http://www.google.com.hk" target="son2">google</a></li>
<li><a href="http://cn.bing.com" target="son2">必应</li>
<li><a href="http://www.baidu.com" target="son2">百度</a></li>
<li><a href="http://www.soso.com" target="son2">搜搜</a></li>
</ul>
</body>

son2.html代码:

<body>
<h1>son2</h1>
</body>

效果:

第四种情况:

target的特殊取值:_blank,_self,_parent,_top,_new。为了理解这些个取值的不同,我们在iframe中来看一眼。主要是target值_parent和_top的区别。

首先,有四个页面,一个father.html,一个big.html,一个middle.html,一个small.html。

father.html承载big.html,代码如下:

<body>
father<br/>
<iframe src="big.html" width="800px" height="800px"></iframe>
</body>

big.html承载middle.html,代码如下:

<body bgcolor="darkgrey">
iframe big<br/>
<iframe src="middle.html" width="600px" height="600px"></iframe>
</body>

middle.html承载small.html,代码如下:

<body bgcolor="darkcyan">
iframe middle<br/>
<iframe src="small.html" width="400px" height="400px" ></iframe>
</body>

small.html中有一个超链接,代码如下,我们重点来看看给这个超链接以不同的target值相应的效果:

<body bgcolor="#b8860b">
iframe small<br/>
<a href="http://www.baidu.com">百度</a>
</body>

原始的效果是这样:

设置target值为_self(同样也是默认取值)效果如下:在超链接所在窗口中页面打开。

设置target值为_parent效果如下:父窗口中打开。如果本身是顶级窗口则_parent效果和_self相同。

设置target值为_top效果如下:在顶级窗口中打开。

所以综合上面效果,在用到多层框架时需要注意超链接跳转时target值的选择。

第五:

target属性值_new和_blank的区别:

_new始终在同一个新窗口中打开

_blank是点击一次打开一个新窗口。

超链接a的target属性的更多相关文章

  1. 转-超链接a的target属性

    超链接a的target属性 <a>标签的target意思很明确就是在哪里打开目标文档. 第一种情况: 默认情况:当我们没有设置超链接属性target的value值时默认是_self,即&l ...

  2. 超链接a标签的属性target的可选值有哪些以及区别

    超链接a标签的属性target的可选值有哪些以及区别 1.<a target="_blank"></a> 2.<a target="_par ...

  3. HTML+css基础 p段落标签 a 超链接标签 Src和href有什么区别和关联? target属性 Meta标签

    p段落标签: <p></p> 1.他是唯一一个可以不写结束标签的双标签. a 超链接标签: 从一个页面链接到另一个页面.靠的是href属性.  Src和href有什么区别和关联 ...

  4. html中超链接的target属性

    <a> 标签的 target 属性规定在何处打开链接文档.(target就是目标的意思) 一共有(4+1种选择): 用法:<a target="value"> ...

  5. 超链接target属性的取值和作用?

    <a>标签的target属性规定在何处打开连接文档 属性值 _black:点击一次打开一个新窗口 _new:始终在同一个新窗口中打开 _self:默认,在当前窗口打开 _parent:在父 ...

  6. HTML <a> 标签的 target 属性

    HTML <a> 标签的 target 属性 HTML <a> 标签 定义和用法 <a> 标签的 target 属性规定在何处打开链接文档. 如果在一个 <a ...

  7. 局部(或全局)设置<a>标签的target属性

            对于超链接<a>标签,target属性的设置是比较关键的,在不同的用户场景下选用适合的新页面载入方式,可以大大的提高访客的体验感.我们一般对target的设置可以挨个来,但 ...

  8. a标签的target属性

    _blank 浏览器总在一个新打开.未命名的窗口中载入目标文档. _self 这个目标的值对所有没有指定目标的 <a> 标签是默认目标,它使得目标文档载入并显示在相同的框架或者窗口中作为源 ...

  9. Html标签<a>的target属性

    target属性规定了在何处打开超链接的文档. 如果在一个 <a> 标签内包含一个 target 属性,浏览器将会载入和显示用这个标签的 href 属性命名的.名称与这个目标吻合的框架或者 ...

随机推荐

  1. padding下中英文左右两端对齐

    <!DOCTYPE html> <html> <head> <meta charset='UTF-8'> <title>helo</t ...

  2. Vue-router中文教程-Vue-router参考手册.CHM

    下载地址http://download.csdn.net/detail/shouce_ren/9689243 百度云下载地址

  3. jQuery cxSlide 焦点图轮换

    cxSlide 是一个简单易用的焦点图展示插件,支持水平.纵向切换,透明过渡切换. 已支持 CSS 动画过渡切换.通过 CSS 动画切换,可以展示更多效果. 版本: jQuery v1.7+ jQue ...

  4. angular源码分析:图解angular的启动流程

    今天做了一些图来说明angular,由于angular实在太复杂了,不知道用什么图表示比较好,所以就胡乱画了一些,希望有人能看得懂. 一.源码文件编译合并顺序图 二.angular.module函数功 ...

  5. 深入理解javascript---如何编写高质量的代码?

    如何书写可维护的代码? 最小全局变量 JavaScript通过函数管理作用域.在函数内部声明的变量只在这个函数内部,函数外面不可用.另一方面,全局变量就是在任何函数外面声明的或是未声明直接简单使用的( ...

  6. 从零开始,做一个NodeJS博客(四):服务器渲染页面与Pjax

    标签: NodeJS 0 一个星期没更新了 = = 一直在忙着重构代码,以及解决重构后出现的各种bug 现在CSS也有一点了,是时候把遇到的各种坑盘点一下了 1 听歌排行 API 修复与重构 1.1 ...

  7. arcgis破解的时候,不能启动license manager的问题

    1.防火墙没关:(非常重要) 2.win+R,调出控制台,输入services.msc.然后手动开启ArcGIS license manager服务,关闭其余类似erdas,matlab影响该服务的开 ...

  8. 听云数据库管理平台NetopGO简介

    ➠更多技术干货请戳:听云博客 断断续续写了将近一个月,听云第一版数据库管理平台终于写完了,期间来来回回的改了好多次小毛病,现在已经部署到生产环境上去了. 在刚开始的时候,后端的数据库集群只有10多个节 ...

  9. iOS 开发之路(使用WKWebView加载Html5) 四

    基于Swift 3 . Xcode 8 . iOS 10 下的WKWebView的使用. 首先是WKWebView的基本用法: var wk:WKWebView! var progBar:UIProg ...

  10. 【代码笔记】iOS-浮点数处理并去掉多余的0

    一,代码. - (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view. ...