web框架

news2024/10/4 21:42:32

1 左右分割窗口

2 上下分割窗口

3 嵌套分割窗口

4 内联框架

框架的作用是把浏览器窗口划分成若干个小窗口，每个小窗口可以分别显示不同的网页。

框架的基本结构主要分为框架集和框架两个部分，在网页中分别用<frameset>和<frame>标记定义。其基本语法的定义方法如下:
<frameset>
    <noframes>
        不支持框架结构显示页面!
    </noframes>
    <frame src="URL">
    </frame>
    ......
<frameset>
注意：一个框架集中可以包含多个框架,每个框架窗口显示的页面由框架的src属性指定。

<frameset>标记有两个对窗口页面进行分割的属性:rows和cols,

这两个属性可以将浏览器页面分为N行M列。也可以各自独立使用。

这两个属性对浏览器窗口的分割方法主要有以下几种类型:左右(水平)分割、上下(垂直)分割、嵌套分割(既存在左右分割、又存在上下分割)。

1 左右分割窗口

<frameset cols= "value1, value2,...">
    <frame src="URL"></frame>
    <frame src="URL"></frame>
</frameset>
注意：cols属性值的个数决定了<frame>标记的个数、即分割的窗口个数。各个值之间使用逗号隔开，各个值定义了相应框架窗口的宽度、可以是数字(单位是像素)也可以是百分比和以号"*"表示的剩余值。

例如：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>左右分割窗口</title>
</head>

	<frameset cols="200,*">
		<frame src="http://www.baidu.com"></frame>
		<frame src="http://www.taobao.com"></frame>
	</frameset>
</html>

2 上下分割窗口

语法格式：
<frameset rows= "value1, value2,...">
    <frame src="URL"></frame>
    <frame src="URL"></frame>
</frameset>
注意：rows属性值的个数决定了<frame>标记的个数、即分割的窗口个数。rows属性定义的是窗口高度，与cols属性的取值不同。

例如：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>上下分割窗口</title>
</head>

	<frameset rows="200,*">
		<frame src="http://www.baidu.com"></frame>
		<frame src="http://www.taobao.com"></frame>
	</frameset>
</html>

3 嵌套分割窗口

嵌套分割需要在<frameset>标记对内再嵌套<frameset>标记，并且子标记<frameset>将会把父标记<frameset>分割的对应窗口再按指定的分割方式进行第二次分割。其语法的定义格式如下:
<frameset rows= "value1, value2,...">
    <frame src="URL"></frame>
    <frameset cols="value1, value2,...">
    </frameset>
</frameset>

例如：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>嵌套分割窗口</title>
</head>
<frameset rows="100,*">
	<frame src="http://www.taobao.com"></frame>
	<frameset cols="200,*">
		<frame src="http://www.baidu.com"></frame>
		<frame src="http://www.sohu.com"></frame>
	</frameset>	
</frameset>
</html>

4 内联框架

1.<iframe>标记规定一个内联框架。

2.内联框架用来在当前HTML文档中嵌人另一个文档。

3.<iframe>标记不是应用在一个<iframe>内, 其可以出现在文档中的任何地方。

4.<iframe>标记在文档中定义了一个矩形区域，在这个区域中浏览器会显示一个单独的文档，包括滚动条和边框。

语法如下：
<iframe 属性="属性值"></iframe>

iframe标记的常用属性
frameborder	是否显示边框，1代表是，0代表否
height	框架作为一个普通标记的高度，建议使用CSS设置
width	框架作为一个普通标记的宽度，建议使用CSS设置
name	框架的名称，window.frames[name]是专用的属性
scrolling	框架是否滚动，其值包括yes (是)、no (否)、auto (自动)
src	内联框架访问的地址

例如：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>iframe</title>
</head>
<body>
	下面的iframe内嵌入其他网页内容
	<iframe src="http://www.sina.com.cn" frameborder=1 height="200" width="300">
		<p>您的浏览器不支持 iframe标签 </p>
	</iframe>
</body>
</html>

结果：

iframe的优点和缺点：

优点：

网页重新加载页面时不需要重新加载整个页面，只需要重新加载页面中的一个框架页面。
减少数据的传输,减少网页的加载时间。
iframe技术简单，使用方便，方便开发，减少代码的重复率。

缺点：

页面过多，不易于管理。
在打印网页时会有些麻烦。
多框架的页面会增加服务器的http请求等。