Frameset框架表

1.Frameset框架表用于分割显示多个页面（若a.html中包含了Frameset则a.html本身不能有body和body内容）。

2.其属性值（target）

（1）blank：用于打开一个全新的页面。

（2）self：替换本页面。

（3）top：整个浏览器窗口。

（4）parent：父窗口。

3.框架表标签<frameset>（有了此标签不能使用<body>标签）

其属性值

（1）rows：横着分割。

（2）clos：竖着分割。

（3）border：设置边界。

（4）bordercolor：设置边界颜色。

（5）horesize：边界不能拖动。

（6）frameborder（yes ：显示边框 no：不显示边框）。

4.框架标签<frame>属性

（1）name：框架名称。

（2）src：引入页面。

（3）scrolling：滚动条（auto yes no）。

5.<noframeset>标签：当浏览器不识别框架表时就会识别<noframeset>里的内容。

6.<Iframe>标签：内联框架标签，可以包含在<body>标签里面，其属性有src,width,height,name,可以配合<a>标签打开另一以页面操作。

注意：

7.（1）<frameset>标签中只能有<frame>子标签，不能有其他元素或标签。

（2）框架标签<frameset>可以嵌套<frameset>。

8.以下为例子

a.html文件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>自己打示例</title>
	</head>
	<body bgcolor="black">
		<header>
			
				
					<font color="aqua" size="5">OneNET</font>
					        
					<a href="#">平台概览</a>
					        
					<a href="#">产品创建</a>
					        
					<a href="#">硬件接入</a>
					        
					<a href="#">应用开发</a>
					        
					<a href="#">接入实例</a>
					        
					<a href="#">资源下载</a>
			<img align="right" src="2.png" height="50" width="150"> 
			
		</header>
	</body>
</html>

b.html 文件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body bgcolor="gainsboro">
		<ol type="1" start="1">
			<li><a href ="#">平台介绍</a></li><br />
				<ol type="1" start="1">
					<li><a href ="#">1.平台构架</a></li><br />
						<ol type="1" start="1.1.1.">
							<li><a href ="#">1.1.平台架构示意图</a></li><br />
							<li><a href ="#">1.2.价值与优势</a></li><br />
						</ol>
					<li><a href ="#">2资源模型</a></li><br />
				</ol>
			<li><a href ="#">协议是和场景介绍</a></li><br />
			<li><a href ="#">整体流程</a></li><br />
		</ol>
	</body>
</html>

c.html 文件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body >
		<p><b>平台概括 • 平台构架 • 平台构架 • 平台构架示意图</b></p>
		<p><b><font size="5">平台构架示意图</font></b></p>
		<br />
		<hr />
		<br />
		<b><font size="3">PneNET在互联网中的基本构架如下图所示，作为PssS层，OneNET为SaaS层和laaS层搭建连接桥梁，分别向上下游提供中<br/>
			间核心能力。</font></b>
		<br />
		<br />
			<img align="left" src="./3.png" height="520" width="1330">
		
	</body>
</html>

分割页面最后的文件

<!DOCTYPE html>
<html>
	<head> 
		<meta charset="{CHARSET}">
		<title>任务页面</title>
	</head>
	    <frameset rows="10%,90%">
				<frame name="frametop" frameborder="0" src="a.html" />
			    <frameset cols="30%,70%"> 
					<frame name="frameleft" frameborder="0" src="b.html" />
					<frame name="frameright" frameborder="0" src="c.html" />
				</frameset>
		</frameset>   
</html>

其调用了a.html b.html c.html 三个文件演示效果如下

将页面分割成了三部分其中上下比例1：9 左右比例3：7

Frameset 框架表

Frameset框架表

猜你喜欢