目录
框架的作用是把浏览器窗口划分成若干个小窗口,每个小窗口可以分别显示不同的网页。
框架的基本结构主要分为框架集和框架两个部分,在网页中分别用<frameset>和标记定义。其基本语法的定义方法如下:
<frameset> <noframes> 不支持框架结构显示页面! noframes> <frame src="URL"> frame> ...... <frameset>注意:一个框架集中可以包含多个框架,每个框架窗口显示的页面由框架的src属性指定。
<frameset cols= "value1, value2,..."> <frame src="URL">frame> <frame src="URL">frame> frameset>注意:cols属性值的个数决定了标记的个数、即分割的窗口个数。各个值之间使用逗号隔开,各个值定义了相应框架窗口的宽度、可以是数字(单位是像素)也可以是百分比和以号"*"表示的剩余值。
例如:
- 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>
语法格式:
<frameset rows= "value1, value2,..."> <frame src="URL">frame> <frame src="URL">frame> frameset>注意:rows属性值的个数决定了标记的个数、即分割的窗口个数。rows属性定义的是窗口高度,与cols属性的取值不同。
例如:
- 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>
嵌套分割需要在
例如:
- 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>
1.<iframe>标记规定 一个内联框架。
2.内联框架用来在当前HTML文档中嵌人另一个文档。
3.
4.
标记在文档中定义了一个矩形区域,在这个区域中浏览器会显示一个单独的文档,包括滚动条和边框。 语法如下:
<iframe 属性="属性值">iframe>
| iframe标记的常用属性 | |
|---|---|
| frameborder | 是否显示边框,1代表是,0代表否 |
| height | 框架作为一个普通标记的高度,建议使用CSS设置 |
| width | 框架作为一个普通标记的宽度,建议使用CSS设置 |
| name | 框架的名称,window.frames[name]是专用的属性 |
| scrolling | 框架是否滚动,其值包括yes (是)、no (否)、auto (自动) |
| src | 内联框架访问的地址 |
例如:
- html>
- <html>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <title>iframetitle>
- 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请求等。