目录
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请求等。
