一、窗口框架简介

框架结构是将两个或两个以上的网页组合起来，在同一个窗口中打开的网页结构。把一个网页分为几个单独的区域，每个区域为一个单独的HTML文件。
框架最常用用途就是导航。一组框架通常包括一个含有导航条的框架和另一个显示主要内容的框架。
框架的基本结构主要分为框架和框架集两个部分
frame：用于定义框架；
frameset：定义框架集。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>框架结构</title>
</head>
<frameset>
    <frame>
</frameset>
<body>


</body>
</html>

二、设置框架集标记frameset属性

frameset用来划分窗口，每一个窗口由一个frame标记标识。

1、水平分割窗口rows

将页面沿水平方向分割，就是将页面分成上下排列的多个窗口

高度1代表第一个子窗口的高度，最后一个*代表最后一个子窗口的高度（所剩余的高度）
高度单位为像素或者百分比

<frameset rows="高度1，高度2，*">
    <frame src="url1">
    <frame src="url2">
</frameset>

2、垂直分割窗口cols

<frameset rows="宽度1，宽度2，*">
    <frame src="url1">
    <frame src="url2">
</frameset>

3、嵌套分割窗口

就是在一个页面中既有水平分割的框架，又有垂直分割的框架

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>框架结构</title>
</head>
<frameset rows="高度1，高度2,*">
    <frame src="url1">
    <frame src="url2">
    <frameset cols="20%,*">
        <frame>
    </frameset>
</frameset>
<body>


</body>
</html>

4、设置边框frameborder

控制窗口框架的周围是否显示框架，用在frameset中控制所有子窗口，用在frame中控制该子窗口。
取值只有0、1或者是yes、no

5、框架的边框宽度framespacing

默认宽度为1，只能在框架集frameset中设置

6、框架的边框颜色bordercolor

设置框架集的边框颜色

三、设置框架标记frame属性

1、框架页面源文件src

每个页面都是一个单独的HTML文件，src指定初始文件地址。
HTML文件可以是一个网页文件、一张图片，地址类型可以是相对地址、绝对地址、带有锚点链接的地址。

2、框架名称name

指定窗口的名称，当完成子窗口的名称定义后，可指定超链接的链接目标显示到网页的某个子窗口中。名称必须是单个的单词或者字母组合。

<frame src="html文件地址" name="子窗口名称">

3、调整框架窗口的尺寸noresize

设置后框架的高度宽度保持不变
没有值，添加该属性后就不能拖拽边框，反之无需指定。

<frame src="html文件地址" name="子窗口名称" noresize>

4、框架边框与页面内容的水平边距marginwidth

设置框架左右边缘的宽度（空白尺寸）

5、框架边框与页面内容的水平边距marginheight

6、设置框架滚动条显示scrolling

控制窗口框架中是否显示滚动条
取值：yes、no、auto（自动调整）

7、不支持框架标记noframes

有的浏览器不支持框架，该标签会提示浏览者

四、浮动框架iframe

完全由设计者定义宽度和高度，并且可以放置在一个网页的任何位置。

1、页面源文件src

<iframe src="url"></iframe>

2、浮动框架的高度height和宽度width

单位像素

<iframe src="url" height="高度" width="宽度"></iframe>

3、对齐方式align

用于设置浮动框架页面相对于浏览器窗口的水平位置
取值：
左对齐left ，右对齐right；
居中对齐middle，底部对齐bottom。

4、设置是否显示滚动条scrolling

值：
yes：总是显示；no：不显示：auto：默认值，整个框架在浏览器页面中左对齐

5、浮动框架边框frameborder

取值只有0、1或者是yes、no

五、综合案例

只是一个大体的样例
1、top.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>头部框架</title>
</head>
<body>
<table width="990" cellspacing="0" cellpadding="0">
    <tbody>
        <tr>
            <td>top1</td>
        </tr>
        <tr>
            <td>top2</td>
        </tr>
    </tbody>
</table>
</body>
</html>

2、left.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>左侧框架</title>
</head>
<body>
<table width="199">
    <tbody>
        <tr>
            <td>left</td>
        </tr>
    </tbody>
</table>
</body>
</html>

3、right.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>主框架</title>
</head>
<body>
<table width="100%">
    <tbody>
        <tr>
            <td>main</td>
        </tr>
    </tbody>
</table>
</body>
</html>

4、框架.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>框架网页</title>
</head>
<frameset rows="209,*" cols="*" frameborder="no" border="1" framespacing="1">
    <frame src="top.html" name="topFrame" frameborder="yes" scrolling="yes" noresize id="topFrame"/>
    <frameset rows="*" cols="223,*" frameborder="no" framespacing="0" border="0">
        <frame src="left.html" name="leftFrame" frameborder="yes" scrolling="yes" noresize id="leftFrame"/>
        <frame src="right.html" name="mainFrame" scrolling="yes" noresize id="mainFrame"/>
    </frameset>
</frameset>
<noframes>
<body>

</body>
</noframes>
</html>