（16）html框架之一frameset

最新推荐文章于 2021-09-08 23:29:50 发布

原创最新推荐文章于 2021-09-08 23:29:50 发布 · 549 阅读

0 ·

CC 4.0 BY-SA版权

html学习笔记专栏收录该内容

17 篇文章

订阅专栏

本文详细介绍了HTML中的框架应用，包括如何使用<frameset>和<frame>元素来划分浏览器窗口，并展示了如何通过不同属性如cols、rows等进行布局调整。此外，还解释了如何在不同框架间创建链接。

框架能将浏览器窗口划分为多个独立的窗格，每个窗格加在独立html网页文件。框架的主要优点是用户可以重新加在单个窗格的html文件而不需要刷新整个浏览器窗口。浏览器窗口框架的集合成为frameset。

（一）<frameset>元素替换了<body>，指明浏览器窗口将被划分为几栏几列（frameset可以嵌套）。主要特性：

1. cols特性指示框架集中包含的列数以及每一列的宽度。数值可以有四种方式：像素，百分比，相对宽度和通配符。几个例子：

cols="100,500,*" :第一列宽度100像素，第二列500，第三列占据剩余空间（通配符*）。

cols=“100，100，100” ：若窗口宽度小于或大于300，则浏览器会根据比例重新分配各列宽度。

cols="40%,60%" : 两列分别占据窗口的40%和60%。

cols="3*,2*,1*" : 第一列占1/2窗口,第二列站1/3窗口,第三列占1/6窗口（相对宽度的方式）

2. rows特性与cols特性类似。

3. border特性指定了每个框架边框的宽度，单位为像素（为0则不显示边框）。

4. frameborder特性指定了框架之间是否显示边框（1或yes表示显示，这也是默认值；0或no表示不显示）

（二）<frame>元素用于指示框架集中每个框架的内容，特性如下：

1. src特性：指示应用于该框架的html文件（也可以指定另一个网站）

2. name特性：用于唯一标识该框架名称。

3. frameborder特性：指示框架的边框是否显示边框，（1或yes表示显示，这也是默认值；0或no表示不显示）。<frame>的frameborder特性会覆盖<frameset>的frameborder特性设置。

4.marginwidth和marginheight特性用于指定框架边框与内容的边距，值的单位为像素。

5.noresize特性通过拖动框架边框可以调整框架大小（noresize=“noresize”）

6. scrolling特性给框架提供滚动条（yes：框架总是包含滚动条，即使能够全部显示所需内容；no：框架一定不包含滚动条，即使无法全部显示所有内容；auto：需要时才有滚动条）

（三）<noframes>元素用于在浏览器不支持框架是提供一则消息

必须在<noframes>元素下加入<body>元素。<noframes><body>不支持框架</body></noframes>

（四）框架之间创建链接

框架流行的主要方式是一个框架放置导航栏，但是将对应网页加载到另一个单独框架中。如下即可实现：

<a href="http://www.baidu.com" target="框架name">baidu</a>

target特性取值：

target="_self" : 将网页加载到当前框架中。

target="_blank" : 将网页加载到新的浏览器窗口。

target="_parent" : 将网页加载到父窗口。对于单个框架，父窗口为整个浏览器。

target="_top" : 将网页加载到但前浏览器窗口，替换整个框架。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<!-- DOCTYPE应使用框架的声明 -->
<html>
	<head>
		<meta charset="utf-8" /> 
		<base href="/testsmarty/templates/"></base>
		<title>框架测试</title>
	</head>
	<frameset rows="20%,*">
		<frame src="biaoti.htm"></frame>
		<frameset cols="30%,70%">
			<frame src="daohang.htm"></frame>
			<frame src="xianshi.htm" name="xianshi_page"></frame>
		</frameset>
	</frameset>	
</html>

标题网页：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
	<head>
		<meta charset="utf-8" /> 
		<title>我是标题</title>
	</head>
	<body>
		<p align="center">我是标题啊！！！</p>
	</body>

</html>

导航网页：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
	<head>
		<meta charset="utf-8" /> 
		<title>导航栏</title>
	</head>
	<body>
		<p align="center"><a href="http://www.baidu.com" target="xianshi_page">baidu</a></p>
		<p align="center"><a href="http://www.bing.com" target="xianshi_page">bing</a></p>
		<p align="center"><a href="http://news.sohu.com/" target="xianshi_page">sohu</a></p>
	</body>
</html>

显示网页：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
	<head>
		<meta charset="utf-8" /> 
		<title>用于显示</title>
	</head>
	<body>
		<p>用于显示结果</p>
	</body>
</html>

效果图如下：