HTML中a标签的target属性的“_blank”、“_self”、“_parent”、“_top”这4个属性值
本文记录了对HTML中<a>标签的target属性的“_blank”、“_self”、“_parent”、“_top”这4个属性值的效果的测试。
使用<frame>标签,做一个有框架的网页,为了能看出HTML中<a>标签的target属性的“_self”和“_parent”这2个属性值的不同效果,需要这个网页还有框架的嵌套,框架思路如下图所示:
该网页由Frame A和Frame B两部分组成,其中Frame B又由Frame B1和Frame B2两部分组成。在Frame B2中设置4个链接,分别用HTML中<a>标签的target属性的“_blank”、“_self”、“_parent”、“_top”这4个不同属性值,观察他们的不同效果:
下面先开始写这个网页:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>This is a title</title>
</head>
<frameset cols="25%,75%">
<frame src="###\Frame_A.html" />
<frame src="###\Frame_B.html" />
</frameset>
</html>
这只是一个演示,这里用“###”代表具体的路径。
这样网页的效果就是左边25%的部分显示Frame_A.html的网页内容,右边75%的部分显示Frame_B.html的网页内容。
继续做Frame_A.html和Frame_B.html:
Frame_A.html:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
</head>
<body bgcolor="#8F8FBD">
<hr />
<h3>Frame A</h3>
<hr />
</body>
</html>
Frame_B.html:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>This is a title</title>
</head>
<frameset rows="25%,75%">
<frame src="###\Frame_B_1.html" />
<frame src="###\Frame_B_2.html" />
</frameset>
</html>
同样的,这里只是为了演示,用“###”代表具体的路径。
继续做Frame B1和Frame B2:
Frame_B_1:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
</head>
<body bgcolor="#7FFF00">
<hr />
<h3>Frame B1</h3>
<hr />
</body>
</html>
Frame_B_2:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
</head>
<body bgcolor=#EBC79E">
<hr />
<h3>Frame B2</h3>
<hr />
<br />
<hr />
<p>
<a href="###/New_Page.html/" target="<b>_blank</b>">This is a
link...</a>
</p>
<a href="###/New_Page.html" target="_blank">This is a link...</a>
<hr />
<br />
<hr />
<p>
<a href="###/New_Page.html/" target="<b>_self</b>">This is a
link...</a>
</p>
<a href="###/New_Page.html" target="_self">This is a link...</a>
<hr />
<br />
<hr />
<p>
<a href="###/New_Page.html/" target="<b>_parent</b>">This is a
link...</a>
</p>
<a href="###/New_Page.html" target="_parent">This is a link...</a>
<hr />
<br />
<hr />
<p>
<a href="###/New_Page.html/" target="<b>_top</b>">This is a
link...</a>
</p>
<a href="###/New_Page.html" target="_top">This is a link...</a>
<hr />
</body>
</html>
最后做一下New_Page.html:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<h1>This is a new page!</h1>
</body>
</html>
在Frame_B_2.html中,有4个连接,都指向同一个网页New_Page.html,他们唯一的不同就是<a>标签中target的属性值不同。
先看一下网页的效果:
分别点击4个链接,可以发现:
_blank:
设置target属性值为“_blank”,可以在一个新的窗口中打开链接。
_self:
设置target属性值为“_self”,会在相同的框架或者窗口中打开链接。
_parent:
设置target属性值为“_parent”,会在父窗口或者包含来超链接引用的框架的框架集中打开链接。我们可以看到原来的Frame_B_1也被新打开的链接覆盖了。
_top:
设置target属性值为“_top”,会清除所有被包含的框架,并打开链接。
上一篇: 【Linux】环境变量
下一篇: java环境变量