1. 程式人生 > >關於框架標籤frameset、frame、iframe

關於框架標籤frameset、frame、iframe

框架結構標籤<frameset>

定義框架結構,rows/columns 的值規定了每行或每列佔據螢幕的面積
一般 <body><frameset> 不同時使用。

框架標籤<frame>

Frame 標籤定義了放置在每個框架中的 HTML 文件。
假如一個框架有可見邊框,使用者可以拖動邊框來改變它的大小。為了避免這種情況發生,可以在 <frame> 標籤中加入:noresize="noresize"
例:

<!-- index.html -->
<!DOCTYPE html>
<html lang=
"en"
>
<head> <meta charset="UTF-8"> <title>Document</title> </head> <frameset rows="120,*"> <frame src="top.html"> <frameset cols="15%,*" > <frame src="left.html"> <frame name="main-frame" src="right-1.html" > </frameset> </
frameset
>
</html>
<!-- left.html -->
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<a href="right-1.html" target="main-frame">right-1.html</a>
	<a href="right-2.html"
target="main-frame">
right-2.html</a> <a href="right-3.html" target="main-frame">right-3.html</a> </body> </html>

框架標籤 <iframe>

HTML5 不再支援 <frameset><frame> ,以後需要用到框架時儘量使用 <iframe>
<iframe> 標籤定義一個內聯框架。
使用 CSS 為 <iframe>(包括滾動條)定義樣式。
例:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<style>
*{margin:0;}
</style>
<body>
	<iframe name="topFrame" width="100%" height="400px" src="http://www.sina.com.cn" ></iframe>
	<p><a  href="http://www.sina.com.cn" target="topFrame">新浪</a> 
	<a target="topFrame" href="http://baidu.com">百度</a></p>
</body>
</html>