HTML学习 -- (二)html框架的使用
普通框架
-
概念
框架技术:将一个浏览器窗口划分成若干个小窗口,每个小窗口显示一个独立的网页。 -
框架集和框架页
框架集<frameset>:主要用来划分窗口的。
框架页<frame>:主要用来指定窗口默认显示的网页地址。
框架与窗户很像。
一个窗户由窗格(框架集)和玻璃(框架页)构成。
先规划窗格,然后再确定每个窗格中放的玻璃。(先有结构,后有内容
)
框架网页的DTD必须是:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">```
![Snip20160410_2.png](http:https://img.haomeiwen.com/i687475/e0fec2f4a5cea9f8.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
- <frameset>属性
cols:划分左右型框架。
cols = “200,” //左框架的宽度为200px,剩下的都是右框架的
cols = “180,,180” //左框架和右框架的宽分别为180px,剩下都是中间框架
cols = “20%,” //划分框架时,可以用百分比来表示
rows:划分上下型框架
rows = “200,” //上框架的高度为200px,剩下都是下框架的
rows = “180,*,180” //上框架和下框架高分别为180px,剩下都是中间框架
注意:cols属性和rows属性,每个框架只能用其中一个,不能两个同时用。
frameborder:是否显示框架的边框线,取值:1或0,yes或no。
border:边框线的粗细。
bordercolor:边框颜色。
- <frame>框架页的属性
src:该小窗口中,默认显示的网页地址。
noresize:不能调整小窗口的大小。如:noresize = “noresize”
scrolling:是否显示滚动条,取值:auto、yes、no
name:给当前小窗口起个名字。这个name就是给<a>标记target属性来用的。
![Paste_Image.png](http:https://img.haomeiwen.com/i687475/33483408e0ddb573.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
- <noframes>含义
描述:当你的浏览器不支持框架时,显示的提示信息。一般情况下,IE6不支持框架,高版本都支持。
语法:<noframes>对不起,你的电脑太老了,该换新的了!</noframes>
- 框架嵌套
![Snip20160410_4.png](http:https://img.haomeiwen.com/i687475/a97319a99634ba30.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
- 注意事项
<frameset>框架,可以称为“普通框架”。
在“普通框架”中,框架的制作分两个部分:(1)框架结构的规划 (2)制作具体的页面
在“普通框架”的结构划分中,不能出现<body>标记,因为没有实际的内容。
### 内嵌框架(行内框架,浮动框架)
- 描述:内嵌框架,是在现有的网页中显示里面内容,与普通框架的区别:<iframe>是<body>的子标记,因此,它应该放在<body>里面。
- 语法格式:<iframe 属性 = “值”>对不起,你的浏览器版本太低!</iframe>
- 常用属性
src:引入的文件地址。
width:框架的宽度
height:框架的高度
frameborder:是否显示框架的边框线,取值:yes或no。
scrolling:是否显示滚动条,取值:auto、yes、no
name:指定当前小窗口的名称,该名称也是给<a>标记的target属性来用。
align:框架在网页中的对齐方式,取值:left、center、right
- 其中取值left或right可以实现图文混排的效果,与```<img>```的对齐方式一样。
- 注意src引入的文件只能是html文件或php文件,不能是其它文件。
![Snip20160410_6.png](http:https://img.haomeiwen.com/i687475/2d231e82748152dd.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)