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标签的作 ...
随机推荐
- display: table-cell; 自适应布局
#extras {display: table-cell;width: 180px;padding-left: 10px;border-right: 1px dotted #d7ad7b;} tabl ...
- JavaScript day3（运算符）
运算符(operator) 基本运算符: 算术运算符用于执行变量之间的算术运算,给定 y=5: 运算符 描述 例子 结果 + 加 x=y+2 x=7 - 减 x=y-2 x=3 * 乘 x=y*2 x ...
- How To:python pip install
官方网站 https://pypi.python.org/pypi/pip/ 下载需要的版本 wget https://pypi.python.org/packages/source/p/pi ...
- C++中的各种进制转换函数汇总及学习
一.指定格式输出 1.C中指定格式输出 printf(); //按八进制格式输出,保留5位高位补零 printf(); //按十进制格式输出,保留3位高位补零 printf(); //按十六进制格式输 ...
- 9.boost权重控制
主要知识点: 学会在should中使用boost进行权重控制 假如现在有一个需求:要把should中某些字段优先显示, 1.不加boost权重控制 GET /forum/article/_se ...
- hdu2002 计算球体积【C++】
计算球体积 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total Submi ...
- GeoTrust 企业(OV)型 通配符(Wildcard) SSL证书
GeoTrust 企业(OV)型 通配符(Wildcard)SSL证书(GeoTrust True BusinessID Wildcard SSL Certificates),支持通配符(Wild ...
- 清北学堂模拟赛d4t6 c
分析:这道题比较有难度. 观察题目,发现只有当一行翻了奇数次后才会产生黑色格子,设有x行被翻了奇数次,y列被翻了偶数次,那么x*m + y*n - 2*x*y = s,接下来就要解方程了.对于二元一次 ...
- ggplot画基本图形类型
df<-data.frame( x=c(3,1,5), y=c(2,4,6), label=c("a","b","c"))p<- ...
- pt-osc改表导致数据不一致案例分析
2016-06-10 李丹 dba流浪猫 我们平时除了解决自己问题外,有时候也会协助圈内人士,进行一些故障排查,此案例就是帮某公司DBA进行的故障分析,因为比较典型,特分享一下,但仅仅是分享发生的过程 ...