在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