`
MauerSu
  • 浏览: 495331 次
  • 性别: Icon_minigender_1
  • 来自: 北京
文章分类
社区版块
存档分类
最新评论

html中<a>标签_top和_parent的区别

    博客分类:
  • HTML
 
阅读更多

源:http://blog.sina.com.cn/s/blog_698e6e270100m3a0.html

评:

在html中,<a>标签有个target属性,而targe属性有四个值,分别是:_blank、_self、_top、 _parent。前两个相信很好理解,第一个就是在新窗口中打开的意思,第二个时候默认的,就是在当前窗口打开,那下面来说下后两者的区别。

    _top就是打开的页面占据了整个页面,_parent就是打开的页面只是在父页面中打开,现在可能有点不太好理解,这两个属性主要用于框架文件中,首先我先贴上我的html文件,如下,注:代码中红色的字体在最后有讲解:

 源:http://www.taoshaw.com/taoshaw/article.asp?id=1868

在手动改HTML代码时经常会用到target参数,常用的有两个target=_blank 和target=_self意思为:
target=_blank表示在新窗口中打开该链接;
target=_self表示相同框架,即在当前窗口(或当前选项卡)中打开该链接
还有两个不常用的:
target=_parent,将链接的文件载入含有该链接框架的父框架集或父窗口中。如果含有该链接的框架不是嵌套的,则在浏览器全屏窗口中载入链接的文件,就象_self参数一样。
target=_top,在当前的整个浏览器窗口中打开所链接的文档,因而会删除所有框架
不写的话就是表示默认值,默认值一般跟浏览器有关。

比如网A中镶嵌iframe了网页B,网页B又镶嵌iframe了网页C

:如果网页C中连接设置target=_parent,则跳将网页B去掉直接A中嵌入网页C中链接页面;
而如果网页C中target=_top ,则直接跳出所有iframe框架,直接转向C中链接页面。

 

 

main.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<frameset rows="20%,*">
 <frame src="top.html" noresize="noresize" />
 <frame src="bottom.html" name="bottom" noresize="noresize" />
</frameset>
</html>

 

top.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body style="font-size:24px;font-weight:bold;">
Example of "_parent" and "_top"
</body>
</html>

 

bottom.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<frameset cols="20%,*">
 <frame src="left.html" noresize="noresize" />
 <frame src="right.html" noresize="noresize" />
</frameset>
</html>

left.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body style="font-size:18px;font-weight:bold;">
I'm left in bottom!!
</body>
</html>

 

right.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<h2>这是_parent的演示</h2>
<a href="test1.html" target="_parent">test1</a>
<br />
<h2>这是_top的演示</h2>
<a href="test2.html" target="_top">test2</a>
<br />
<h2>这是名称的演示</h2>
<a href="test1.html" target="bottom">test1</a>
</body>
</html>

 

test1.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<h1>这是test1.html文件</h1>
<a href="bottom.html">返回</a>
</body>
</html>

 

test2.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<h1>这是test2.html文件</h1>
<a href="main.html">返回</a>
</body>
</html>

 

    从上述代码中,可以看出架构为

html中<a>标签_top和_parent的区别

main.html文件包含了 top.html文件和bottom.html文件,而bottom.html文件又包含了left.html文件和right.html文件,对于 left.html和right.html文件来说,他们的“_parent”就是bottom架构,他们的“_top”就是main架构。

 

    在我的代码中,有两句是红色的字体,这是什么意思呢?其实这两句话和“_parent”的作用是一样的,也就是说,可以通过name来实现“_parent”的作用。

分享到:
评论

相关推荐

    Html标签大全.txt

    Html标签大全 &lt;a&gt;&lt;/a&gt; 超文本链接 &lt;a href="URL"&gt;&lt;/a&gt; 创建超文本链接 ,其中的url为链接目标地址 &lt;a href="mailtEMAIL"&gt;&lt;/a&gt; 创建自动发送电子邮件的链接 &lt;a name="name"&gt;&lt;/a&gt; 创建位于文档内部的书签 &lt;a href=...

    web应用程序设计复习题.doc

    _top 4、下面的标签中( C )是加粗标签。 A. &lt;i&gt;&lt;/i&gt; B. &lt;u&gt;&lt;/u&gt; C. &lt;b&gt;&lt;/b&gt; D. &lt;h&gt;&lt;/h&gt; 5、下面哪个属性指明图像的URL地址?( C ) A. WIDTH B. HEIGHT C. SRC D. ALT 6、下面标记中哪个表示表格的行( B )。 A...

    动易网站标签说明(电子书)

    &lt;/XSL:ATTRIBUTE&gt;[更多]&lt;/A&gt; 21. &lt;/DIV&gt; 22. &lt;A&gt; 23. &lt;XSL:ATTRIBUTE name="href"&gt; 24. &lt;XSL:VALUE-OF select="pe:GetNodePath('true',NodeID)" /&gt; 25. &lt;/XSL:ATTRIBUTE&gt; 26. &lt;XSL:VALUE-OF select="pe:Get...

    iframeV1.2测试源码

    iframeV1.2测试源码:改进对&lt;a&gt;标签_top,_self,_parent,指定窗口打开应用的源码,更容易理解IFRAME嵌套中的父级调用及窗口内联相互调用,供学习参考。

    javascript函数的解释

    57.innerHTML的值是表单元素的值:如&lt;p id="para"&gt;"how are &lt;em&gt;you&lt; /em&gt;"&lt;/p&gt;,则innerHTML的值就是:how are &lt;em&gt;you&lt;/em&gt; 58.innerTEXT的值和上面的一样,只不过不会把&lt;em&gt;这种标记显示出来. 59.contentEditable可...

    LCRapidDevelop-master

    - [API地址](http://mylance.top/index.html) - [下载APK](http://fir.im/LCRapidDevelop) ###[English](README_EN.md) -------- ##功能说明 - 异常崩溃统一管理 - retrofit rxjava okhttp rxcache-----------...

    前端学习笔记(不断更新中)

    2.a标签中的target: _blank:在新窗口中打开被链接文档 _top:在窗口主体中打开被链接文档 _self:在被点击时的同一框架中打开被链接文档(默认) _parent:在父框架中打开被链接文档 3.input标签中的require:将...

    ExtAspNet_v2.3.2_dll

    -MenuButton, LinkButton, Button, LinkButtonField的ConfirmTarget属性由字符串变为枚举类型,可以取三个枚举值Self, Parent, Top。 -Confirm.GetShowReference的最后一个参数target变为枚举类型。 -Alert....

    Xhtml下不常用却很有用的标签

    Xhtml有很多不常用却很有用的标签。有的能事半功倍,有的能改进语义,有的则能提高易用性,我总结了一些,总结的原则是有用而且能用,就是大多数浏览器得支持,否则就不算“上上签”了。只能望“签”兴叹又有什么用...

    ExtAspNet v2.2.1 (2009-4-1) 值得一看

    -MenuButton, LinkButton, Button, LinkButtonField的ConfirmTarget属性由字符串变为枚举类型,可以取三个枚举值Self, Parent, Top。 -Confirm.GetShowReference的最后一个参数target变为枚举类型。 -Alert....

    Maven权威指南 很精典的学习教程,比ANT更好用

    本例中所用的技术 7.2. simple-parent项目 7.3. simple-model模块 7.4. simple-weather模块 7.5. simple-persist模块 7.6. simple-webapp模块 7.7. 运行这个Web应用 7.8. simple-command模块 7.9. 运行这...

    PT80-NEAT开发指南v1.1

    版权和许可条款 ...................................................................................................................................... 1 第二章 PT80 开发入门 ..............................

Global site tag (gtag.js) - Google Analytics