在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. git 缓存密码导致的不能和远程仓库交互unable to access... 403错误

    尝试了各种方式,包括卸载等最终解决方案: 查看本机的credential 是否已经被清空. 如果输入了 git config credential.helper 命令之后没有输出,说明 git 的配置 ...

  2. JAVA通用工具类

    1.异常验证框架 框架1:com.google.common.base.Preconditions 框架2:org.apache.commons.lang.Validate 框架3:org.apach ...

  3. 31.IK分词器配置文件讲解以及自定义词库

    主要知识点: 知道IK默认的配置文件信息 自定义词库     一.ik配置文件     ik配置文件地址:es/plugins/ik/config目录     IKAnalyzer.cfg.xml:用 ...

  4. Windows编译PHP7.2拓展

    转载请注明文章出处:https://tlanyan.me/windows-co... 准备工作 https://github.com/Microsoft/...下载PHP-SDK(在右边的" ...

  5. 我理解的数据结构(二)—— 栈(Stack)

    我理解的数据结构(二)-- 栈(Stack) 一.栈基础 栈是一种线性结构 相比较数组,栈对应的操作是数组的子集 只能从一端添加元素,也只能从同一端取出元素,这一端称为栈顶 栈是一种后进先出的数据结构 ...

  6. 【codeforces 797C】Minimal string

    [题目链接]:http://codeforces.com/contest/797/problem/C [题意] 一开始,给你一个字符串s:两个空字符串t和u; 你有两种合法操作; 1.将s的开头字符加 ...

  7. Alliances

    树国是一个有n个城市的国家,城市编号为1∼n.连接这些城市的道路网络形如一棵树, 即任意两个城市之间有恰好一条路径.城市中有k个帮派,编号为1∼k.每个帮派会占据一些城市,以进行非法交易.有时帮派之间 ...

  8. Spring Cloud 之 Cookie 丢失 与 Host 传递

    通过spring zuul 代理至后台,写入Cookie发现无法写入,到浏览器中,和无法获取Domain域名 通过长时间的度娘和求助别人发现:Spring-zuul  需要加入以下配置 zuul.se ...

  9. Mysql双主自增长冲突处理

    Mysql双主自增长冲突处理   多主互备和主从复制有一些区别,因为多主中都可以对服务器有写权限,所以设计到自增长重复问题   出现的问题(多主自增长ID重复)  1:首先我们通过A,B的test表结 ...

  10. [Bzoj4196] [NOI2015] 软件包管理器 [树链剖分,线段树]

    题解摘要:树链剖分后用线段树区间查询修改,对于安装软件,将改点到根的路径全部变为1,对于卸载软件,将子树清空.注意边界,编号是从0开始的,容易漏掉树根. 第一次写树剖- #include <io ...