框架结构标签<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>
效果大致如下:
更多详情见:http://www.w3school.com.cn/html/html_frames.asp
框架标签 <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>