转-超链接a的target属性

最新推荐文章于 2024-03-17 11:48:44 发布

「已注销」

最新推荐文章于 2024-03-17 11:48:44 发布

阅读量1.3k

点赞数

分类专栏：前端

原文链接：https://www.mk2048.com/blog/blog.php?id=0kbccj1jaa&title=%E8%BD%AC-%E8%B6%85%E9%93%BE%E6%8E%A5a%E7%9A%84target%E5%B1%9E%E6%80%A7

版权

前端专栏收录该内容

1143 篇文章 3 订阅

订阅专栏

<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是点击一次打开一个新窗口。

如果觉得本文对您有帮助~可以支付宝(左)或微信支持一下：

分类: html css

标签: html

好文要顶关注我收藏该文

starof
关注 - 56
粉丝 - 735

加关注

« 上一篇： html基础总结版
» 下一篇： jQuery选择器

posted @ 2014-10-10 00:11 starof 阅读( 6001) 评论( 0) 编辑收藏

刷新评论刷新页面返回顶部

发表评论

昵称：

评论内容：

不改了退出订阅评论

[Ctrl Enter快捷键提交]

更多专业前端知识，请上【猿2048】www.mk2048.com

「已注销」

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
转-超链接a的target属性

<a>标签的target意思很明确就是在哪里打开目标文档。第一种情况：默认情况：当我们没有设置超链接属性target的value值时默认是_self，即<a target="_self">。它...
复制链接

扫一扫