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

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

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>

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

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

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

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

html中<a>标签_top和_parent的区别的更多相关文章

  1. python 全栈开发,Day45(html介绍和head标签,body标签中相关标签)

    一.html介绍 1.web标准 web准备介绍: w3c:万维网联盟组织,用来制定web标准的机构(组织) web标准:制作网页遵循的规范 web准备规范的分类:结构标准.表现标准.行为标准. 结构 ...

  2. html body中的标签

    HTML中的标签有两类 一.字体标签 字体标签包含:h1~h6.<font>.<u>.<b>.<strong><em>.<sup> ...

  3. html中a标签的常见用法

    html中a标签的常见用法 一.总结 一句话总结: a.页面跳转 b.使用锚点定位 c.下载文件 二.html中<a>标签的用法 转自或参考:html中<a>标签的用法http ...

  4. python 全栈开发,Day45(html介绍和head标签,body标签中相关标签)

    一.html介绍 1.web标准 web准备介绍: w3c:万维网联盟组织,用来指定web标准的机构(组织) web标准:制作网页遵循的规范 web准备规范的分类:结构标准.表现标准.行为标准. 结构 ...

  5. html中map标签和area标签的应用(总结)

    html中map标签和area标签的应用(总结) 一.总结 一句话总结: html中map标签和area标签和组成图片地图,在前端优化中可以减少http请求 1.map标签的用途是什么? 图片地图:是 ...

  6. html - body标签中相关标签

    body标签中相关标签   今日内容: 字体标签: h1~h6.<font>.<u>.<b>.<strong><em>.<sup> ...

  7. HTML中Meta标签中http-equiv属性小结

    HTML中Meta标签中http-equiv的用法: <meta http-equiv="这里是参数" content="这里是参数值"> 1.Ex ...

  8. HTML中Meta标签中http-equiv属性

    HTML中Meta标签中http-equiv的用法: <meta http-equiv="这里是参数" content="这里是参数值"> 1.Ex ...

  9. HTML中meta标签作用及属性总结

    在前端开发中编写html静态网页模板时,head标签内总是会带上许多meta标签,大多数时候并不十分了解这些标签的具体作用,只是别人写了我们也写上吧! 今天小编特意查询了一下关于网页中meta标签的作 ...

随机推荐

  1. 39.date hitogram基础知识

    主要知识点: date hitogram之统计每月电视销量     上一节讲到histogram,他是以数值进行分组.本节讲到以日期进行bucket分组操作,也就是说把连续的日期变成离散的日期区间,然 ...

  2. 12. tie_breaker的使用原因和使用方法

    主要知识点: tie_breaker的使用原因和使用方法         一.tie_breaker的使用原因 dis_max,只是取分数最高的那个query的分数而已,完全不考虑其他query的分数 ...

  3. Problem 21

    Problem 21 https://projecteuler.net/problem=21 Let d(n) be defined as the sum of proper divisors of  ...

  4. Problem 34

    Problem 34 https://projecteuler.net/problem=34 145 is a curious number, as 1! + 4! + 5! = 1 + 24 + 1 ...

  5. noip模拟赛 黑骑士

    题目描述江爷爷给你出了一道题:给你一个图,保证每个点最多属于一个简单环,每个点度数最多为3,求这个图有多少“眼镜图形个数”保证图联通哦~其中“眼镜图形个数”,定义为三元组(x,y,S),其中x和y表示 ...

  6. 从零搭建流媒体服务器+obs推流直播

    背景介绍 本文使用的流媒体服务器的搭建是基于rtmp(Real Time Message Protocol)协议的,rtmp协议是应用层的协议,要依靠底层的传输层协议,比如tcp协议来保证信息传输的可 ...

  7. ant生成war包的简单实现

    按网上的操作,实现一下. build.xml: <?xml version="1.0" ?> <project name ="antwebproject ...

  8. FOJ 10月赛题 FOJ2198~2204

    A题. 发现是递推可以解决这道题,a[n]=6*a[n-1]-a[n-2].因为是求和,可以通过一个三维矩阵加速整个计算过程,主要是预处理出2^k时的矩阵,可以通过这道题 #include <i ...

  9. Eclipse集成Resinserver

        因为Resin在Eclipse下的表现丝毫不亚于Tomcat,小编决定带领众小弟一起学习使用Resin.虽然小编身边也没有什么大牛在使用Resin,但看到Resin的广告已经吹到天边了.所以还 ...

  10. 心跳机制tcp keepalive的讨论、应用及“断网”、"断电"检测的C代码实现(Windows环境下)

    版权声明:本文为博主原创文章,转载时请务必注明本文地址, 禁止用于任何商业用途, 否则会用法律维权. https://blog.csdn.net/stpeace/article/details/441 ...