html中<a>标签_top和_parent的区别
在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的区别的更多相关文章
- python 全栈开发，Day45(html介绍和head标签,body标签中相关标签)
一.html介绍 1.web标准 web准备介绍: w3c:万维网联盟组织,用来制定web标准的机构(组织) web标准:制作网页遵循的规范 web准备规范的分类:结构标准.表现标准.行为标准. 结构 ...
- html body中的标签
HTML中的标签有两类 一.字体标签 字体标签包含:h1~h6.<font>.<u>.<b>.<strong><em>.<sup> ...
- html中a标签的常见用法
html中a标签的常见用法 一.总结 一句话总结: a.页面跳转 b.使用锚点定位 c.下载文件 二.html中<a>标签的用法 转自或参考:html中<a>标签的用法http ...
- python 全栈开发，Day45（html介绍和head标签，body标签中相关标签）
一.html介绍 1.web标准 web准备介绍: w3c:万维网联盟组织,用来指定web标准的机构(组织) web标准:制作网页遵循的规范 web准备规范的分类:结构标准.表现标准.行为标准. 结构 ...
- html中map标签和area标签的应用（总结）
html中map标签和area标签的应用(总结) 一.总结 一句话总结: html中map标签和area标签和组成图片地图,在前端优化中可以减少http请求 1.map标签的用途是什么? 图片地图:是 ...
- html - body标签中相关标签
body标签中相关标签 今日内容: 字体标签: h1~h6.<font>.<u>.<b>.<strong><em>.<sup> ...
- HTML中Meta标签中http-equiv属性小结
HTML中Meta标签中http-equiv的用法: <meta http-equiv="这里是参数" content="这里是参数值"> 1.Ex ...
- HTML中Meta标签中http-equiv属性
HTML中Meta标签中http-equiv的用法: <meta http-equiv="这里是参数" content="这里是参数值"> 1.Ex ...
- HTML中meta标签作用及属性总结
在前端开发中编写html静态网页模板时,head标签内总是会带上许多meta标签,大多数时候并不十分了解这些标签的具体作用,只是别人写了我们也写上吧! 今天小编特意查询了一下关于网页中meta标签的作 ...
随机推荐
- c#用控制台程序安装启动停止卸载服务
第一步:新建控制台项目 第二步:添加服务 第三步:右键新建完成的服务项 点击 在start 和stop事件中分别写上 第四步 编写代码 双击打开 using System; using Syst ...
- openoffice启动服务并将office文件转换为pdf文件
1.首先下载最新版的openoffice工具,安装完成之后安装服务,, win+r打开命令提示符 输入cmd,cd C:\Program Files (x86)\OpenOffice 4\progra ...
- 39.date hitogram基础知识
主要知识点: date hitogram之统计每月电视销量 上一节讲到histogram,他是以数值进行分组.本节讲到以日期进行bucket分组操作,也就是说把连续的日期变成离散的日期区间,然 ...
- 2017沈阳网络赛hdu6199 gems gems gems
gems gems gems Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) P ...
- CF586D. Phillip and Trains
/* CF586D. Phillip and Trains http://codeforces.com/problemset/problem/586/D 搜索 */ #include<cstdi ...
- BZOJ1191 超级英雄Hero （匈牙利算法）
直接跑匈牙利,注意到“只有当选手正确回答一道题后,才能进入下一题,否则就被淘汰”,一旦无法满足就直接退出. #include <cstdio> #include <algorithm ...
- mysql grant 用户权限总结
https://blog.csdn.net/anzhen0429/article/details/78296814
- php svn仓库提交预处理
需要做的事情 1.检查是否填写注释2.php文件是否有语法错误 pre-commit脚本 hook脚本名称:hooks/pre-commit REPOS="$1" TXN=&quo ...
- 机器学习1k近邻
自己一直学习计算机视觉方面的东西,现在想学习一下数据挖掘跟搜索引擎,自己基础也有点薄弱,看朱明的那本数据挖掘,只能片面的了解这个数据挖掘.不过最近有一本书 机器学习实战,于是乎通过实战的形式了解一下基 ...
- Oracle 11g OEM登录后提示“出现内部错误”
使用oem登录时提示:“出现内部错误.有关详细信息, 请查看日志文件”. 具体原因未知,发现使用SQL Plus登录一次之后,再次登录即可.