`
MauerSu
  • 浏览: 513917 次
  • 性别: 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”的作用。

分享到:
评论

相关推荐

    阻止 <a> 地址轉向

    在网页开发中,`&lt;a&gt;` 标签是用于创建超链接的重要元素,它通过 `href` 属性定义了链接的目标地址。然而,有时我们可能需要阻止 `&lt;a&gt;` 标签的默认行为,例如防止页面跳转或者在点击链接时执行特定的 JavaScript 代码...

    HTML属性.docx

    - 斜体:`&lt;i&gt;`、`&lt;em&gt;`或`&lt;cite&gt;`,其中`&lt;em&gt;`通常用于强调,`&lt;i&gt;`和`&lt;cite&gt;`则更多用于表示特殊含义。 - 上标:`&lt;sup&gt;`,用于表示上标文本,如数学公式中的指数。 - 下标:`&lt;sub&gt;`,用于表示下标文本,如化学...

    HTML a 标签的 target 属性.doc

    - 使用框架时,确保 `&lt;frame&gt;` 或 `&lt;iframe&gt;` 元素的 `name` 属性与 `&lt;a&gt;` 标签中的 `target` 属性匹配,以便正确地在指定框架中加载文档。 - 不要在自定义框架名称或 ID 中使用下划线作为第一个字符,因为这可能会...

    a标签的链接特效

    在网页设计中,`&lt;a&gt;`标签是HTML中的一个核心元素,用于创建超链接,它使得用户能够通过点击跳转到其他页面或者执行特定动作。本文将深入探讨`&lt;a&gt;`标签的用法,以及如何在JSP(JavaServer Pages)环境中实现美观的...

    html笔记(20220104205800).pdf

    5. HTML链接:&lt;a&gt;标签用于创建超链接,href属性指定链接的目标地址,target属性决定新链接在何处打开(_self、_blank、_parent、_top)。 6. HTML表格:&lt;table&gt;元素用于创建表格,&lt;tr&gt;定义行,&lt;td&gt;定义单元格,&lt;th&gt;...

    HTML学习_网页html_

    此外,`&lt;a&gt;`标签还可以通过`target`属性设置打开链接的方式,如`_blank`表示在新窗口或标签页中打开,`_self`为当前窗口,`_parent`和`_top`则与框架相关。 除了基本的表格和超链接,HTML5还引入了许多新的元素和...

    HTML部分题库.pdf

    - 在`&lt;A&gt;`标签中,`href`属性指定链接目标,`&lt;IMG&gt;`标签中`src`属性指定图像的URL。 27. HTML内联样式: - CSS样式可以写在HTML标签中使用`style`属性直接定义样式。 需要注意的是,文档内容中存在一些扫描错误...

    Html标签大全(很全)

    * &lt;a href="mailto:EMAIL"&gt;&lt;/a&gt;:创建自动发送电子邮件的链接,EMAIL 为电子邮件地址。 * &lt;a name="name"&gt;&lt;/a&gt;:创建位于文档内部的书签,name 为书签的名称。 * &lt;a href="#name"&gt;&lt;/a&gt;:创建指向位于文档内部书签的...

    html基础知识点以及常用标签

    HTML中的基本标签包括标题标签`&lt;h1&gt;`到`&lt;h6&gt;`,段落标签`&lt;p&gt;`,换行标签`&lt;br/&gt;`,水平线标签`&lt;hr/&gt;`,以及各种字体样式标签如`&lt;i&gt;`(斜体)、`&lt;em&gt;`(强调)、`&lt;del&gt;`(删除线)。此外,`&lt;img&gt;`标签用于插入图像,它...

    HTML简介及常用标签(中)

    列表标签包括无序列表(`&lt;ul&gt;`), 有序列表(`&lt;ol&gt;`), 和定义列表(`&lt;dl&gt;`). ##### 1. 无序列表 (`&lt;ul&gt;`) 无序列表中的每个列表项由`&lt;li&gt;`标签定义。 **语法**: ```html &lt;ul&gt; &lt;li&gt;无序列表项1&lt;/li&gt; &lt;li&gt;无序列表项2...

    2021-2022收藏的精品资料html标签大全DOC.doc

    - `&lt;b&gt;`、`&lt;i&gt;`、`&lt;s&gt;`、`&lt;u&gt;`:分别用于加粗、斜体、删除线和下划线。 - `&lt;sub&gt;`和`&lt;sup&gt;`:下标和上标,常用于化学公式或数学表达式。 - `&lt;tt&gt;`:等宽字体,常用于显示计算机代码。 7. 颜色和字体: - `...

    《Html》前端学习笔记

    超链接`&lt;a&gt;`元素使用`href`属性定义链接的目标,`target`属性控制链接打开的方式,例如`_self`、`_blank`、`_parent`和`_top`。`&lt;a&gt;`标签还有`title`属性用于鼠标悬停时显示提示信息,`alt`属性用于图片加载失败时...

    HTML代码制作一个网站.zip

    &lt;form&gt;元素用于创建交互式表单,包括输入控件(&lt;input&gt;)、选择框(&lt;select&gt;和&lt;option&gt;)、文本区域(&lt;textarea&gt;)和按钮(&lt;button&gt;)。表单数据可以通过method属性(GET或POST)提交至服务器。 八、响应式设计 为了适应...

    html 的全部标签

    8. `&lt;xmp&gt;`、`&lt;plaintext&gt;` 和 `&lt;listing&gt;`: 用于固定宽度的文本显示,其中`&lt;plaintext&gt;`不执行任何HTML标签,`&lt;listing&gt;`则保留部分格式。 ### 三、链接标签 `&lt;a&gt;` 1. `&lt;a href&gt;`: 基本的链接标签,`href`属性指向...

    HTML5 常用语法一览(列举不支持的属性)

    超链接标记`&lt;a&gt;`是HTML中的重要元素,它的`href`属性指定了链接地址,`title`提供提示文字,而`target`属性定义了链接打开的方式,如`_blank`在新窗口中打开,`_self`在当前窗口打开,`_parent`在父框架中打开,`_...

    html阶段性测试题及答案

    `_blank`值表示在新窗口或标签页中打开链接,`_self`表示在当前窗口或标签页中打开,`_parent`和`_top`则与框架有关,这里不做详细展开。题目中选项A是正确的做法。 3. **重置按钮**:`&lt;input&gt;`元素的`type`属性值...

    韩顺平《轻松搞定网页设计HTML+CSS+JAVASCRIPT》HTML学习笔记.pdf

    3. 超链接:&lt;a&gt;元素用于创建超链接,href属性用于指定链接的目标地址,target属性用于指定链接的打开方式,可以是_self、_blank、_parent、_top等。 4. 表格布局:&lt;table&gt;元素用于创建表格,align属性用于设置表格...

    HTML的常见标签.docx

    未在此详细展开的还有图像部分(如`&lt;img&gt;`标签),音频部分(如`&lt;audio&gt;`标签),链接部分(如`&lt;a&gt;`标签的`href`属性),列表部分(`&lt;ul&gt;`、`&lt;ol&gt;`、`&lt;li&gt;`标签),以及表格部分(`&lt;table&gt;`、`&lt;tr&gt;`、`&lt;th&gt;`、`&lt;td&gt;`...

    html标签集合大全

    `&lt;b&gt;`、`&lt;i&gt;` 和 `&lt;u&gt;` 标签 - **作用**: - `&lt;b&gt;`:加粗文本。 - `&lt;i&gt;`:斜体文本。 - `&lt;u&gt;`:下划线文本。 - **示例**: ```html &lt;b&gt;加粗文本&lt;/b&gt; &lt;i&gt;斜体文本&lt;/i&gt; &lt;u&gt;带下划线文本&lt;/u&gt; ``` #### 12. `...

    (完整版)HTML经典试题-网页制作.pdf

    - `&lt;a href="URL" target="_left"&gt;..&lt;/a&gt;`和`&lt;a href="URL" target="_blank"&gt;..&lt;/a&gt;`分别创建了在左侧窗口和新窗口打开URL的链接。 - 关于`&lt;hr&gt;`标签的练习:涉及了如何使用`&lt;hr&gt;`标签插入水平线,并使用不同的...

Global site tag (gtag.js) - Google Analytics