HTML之框架标签

最新推荐文章于 2024-03-29 06:22:31 发布

carson0408

最新推荐文章于 2024-03-29 06:22:31 发布

阅读量1.1k

点赞数 2

分类专栏： HTML 文章标签：框架标签 frameset frame

本文链接：https://blog.csdn.net/carson0408/article/details/79592569

版权

HTML 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

使用框架标签可以使网页的内容布局更整齐清晰，更加的有层次感。制作框架一般使用frameset元素定义一个框架集，它被用来组织多个框架，而框架则由frame来定义。每个框架都存有独立的文档。首先使用frameset元素定义个框架集，而它有两个属性：cols和rows，分别代表框架集的行列。注意，frameset不能与body共用。

以下通过一个例子来更加清楚的了解frameset的效果。

<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<head>
	<title size="10" color="red">welcome to HTML</title>
</head>
	<frameset cols="50%,*">
		<frame />
		<frame />
	</frameset>
</html>

得到如下网页：

以上便是使用了cols属性，将框架集分成两列，并且每个框架的宽度各占50%，因此cols的取值可以是整数，百分数，或者*。

关于frame元素有几个常用的属性，如frameborder，取值为0或1，表示是否显示框架周围的边框；src属性，值一般是URL，表示框架显示文档的URL；scrolling属性，取值为yes、no或者auto，表示是否在框架中显示滚动条。

以下通过对frame属性细化来看看属性的特点。

<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<head>
	<title size="10" color="red">welcome to HTML</title>
</head>
	<frameset cols="50%,*">
		<frame src="multi.html"/>
		<frame src="01.html"/>
	</frameset>
</html>

得到的网页如下图所示：

上图的左边框架显示的是multi.html的内容；右边框架显示的是01.html的内容，这就是框架集的作用，可以将多个需要整合在一个页面上的内容进行整合，并且使布局更加有层次感。

接下来讲讲混合框架的使用，即在框架集中设置框架集，比如一个框架集分为左右两个框架，其中左框架中设置一个框架集，分为上下两个框架，这就是复合框架。代码如下所示：

<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<head>
	<title size="10" color="red">welcome to HTML</title>
</head>
	<frameset cols="50%,*">
		<frameset rows="50%,*">
			<frame src="multi.html" frameborder="1" marginwidth="100" marginheight="100" />
			<frame src="b.html" frameborder="1" marginwidth="100" marginheight="100" />
		</frameset>
		<frame src="01.html" frameborder="1" marginwidth="100" marginheight="100"/>
	</frameset>
</html>

效果如下所示：