frameset

frame，是网页开发必须掌握的知识。例如后台架构、局部刷新，页面分割，都是frame的用途表现，尤其是后台页面制作，使用frame会给用户带来非常舒适的使用感受。

frame知识点包括（frameset标签、frame标签、iframe标签）。

一、frameset

1. 属性

①border

设置框架的边框粗细。

②bordercolor

设置框架的边框颜色。

③frameborder

设置是否显示框架边框。设定值只有0、1；0 表示不要边框，1 表示要显示边框。

④cols

纵向分割页面。其数值表示方法有三种：“30%、30（或者30px）、*”；数值的个数代表分成的视窗数目且数值之间用“,”隔开。“30%”表示该框架区域占全部浏览器页面区域的30%；“30”表示该区域横向宽度为30像素；“*”表示该区域占用余下页面空间。例如：cols="25%,200,*" 表示将页面分为三部分，左面部分占页面30%，中间横向宽度为200像素，页面余下的作为右面部分。

⑤rows

横向分割页面。数值表示方法与意义与cols相同。

⑥framespacing

设置框架与框架间的保留的空白距离。

2. 用例

注意1：

cols与rows两属性尽量不要同在一个<frameset>标签中使用。若要实现下图架构，代码正确写法为：

【即，若想即使用cols又使用rows，可利用frameset嵌套实现】

注意2：

意思是：第一个框架占整个浏览器窗口的40%,剩下的空间平均分配给另外两个框架。

意思是：浏览器窗口等分为四部分。

二、frame

1. 属性

①name

设置框架名称。此为必须设置的属性。

②src

设置此框架要显示的网页名称或路径。此为必须设置的属性。

③scrolling

设置是否要显示滚动条。设定值为auto, yes, no。

④bordercolor

设置框架的边框颜色。

⑤frameborder

设置是否显示框架边框。设定值只有0、1；0 表示不要边框，1 表示要显示边框。

⑥noresize

设置框架大小是否能手动调节。

⑦marginwidth

设置框架边界和其中内容之间的宽度。

⑧marginhight

设置框架边界和其中内容之间的高度。

⑨width

设置框架宽度。

⑩height

设置框架高度。

2. 用例

三、iframe

是浮动的框架（frame），其常用属性与frame类似，其他的主要有以下（相同的就不列举了）

1. 属性

①align

设置垂直或水平对齐方式

②allowTransparency

设置或获取对象是否可为透明。

2. 用例

注意：

iframe标签与frameset、frame标签的验证方法不同，是XHTML 1.0 Transitional。且iframe是放在body标签之内，而frameset、frame是放在body标签之外。

四、综合示例

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>First</title>
    </head>
　　<!--
            作者：1107530849@qq.com
            时间：2014-06-24
            描述：注意此处body标签是没有的(noframes才显示)
        -->    
        <frameset rows="10%,90%">
            <frame src="Top.html" name="top"/>
            <frameset cols="15%,*">
                    <frame src="Home.html" name="home"/>
                        <frame src="index1.html" name="index1"/>
                        
            </frameset>
        
            <noframes>
                <body>
                你的浏览器不支持frame
                </body>
            </noframes>
            
        </frameset>
    </html>

first.html

//top页面
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Top</title>
    </head>
    <body>
        <iframe src="iframe.html" border="0" frameborder="0"></iframe>
    </body>
</html>

//iframe页面

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Top</title>
    </head>
    <body>
        我是通过iframe引入的top
    </body>
</html>

top.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Home</title>
    </head>
    <body>
        <ul>
        
        <!--
            作者：1107530849@qq.com
            时间：2014-06-24
            描述：关键点是target属性,需要跟显示页面的name属性一致
        -->    
            <li><a href="index1.html" target="index1">index1</a> </li>
            <li><a href="index2.html" target="index1">index2</a></li>
            <li><a href="index3.html" target="index1">index3</a></li>
        </ul>
    </body>
</html>

左侧导航页面home.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="" />
        <title></title>
    </head>
    <body>
        index1
    </body>
</html>

导航链接页