第9章 框架
9.1 框架概述
框架的作用，就是把浏览器窗口划分成若干个小窗口，每个小窗口可以分别显示不同的网页。这样在一个页面中可以同时显示不同网页内容，不同窗口的内容相互独立。框架的主要用途是导航，通常会在一个窗口中显示导航条，另外一个窗口则作为内容窗口，用于显示导航栏目的目标页面内容，窗口的内容会根据导航栏目的不同而动态变化。
html框架集与body同级,因此不能同时出现。框架的基本结构主要分为框架集<frameset>和框架<frame>两个部分，基本语法如下：
<frameset>
<frame/> <!-- 一个框架集中可以包括多个框架，每个框架窗口显示的页面由框架的 src 属性指定。 -->
<frame/>
...
</frameset>
9.2 框架集标记<frameset>
定义浏览器窗口的分割方式、各分割窗口（框架）的大小以及设置框架边框的颜色和粗细等属性。主要属性有：
属性 说明
border 边框宽度，框架粗细
bordercolor 边框颜色
frameborder 是否显示边框（取值1, 0或yes，no）
framespacing 边框间距
rows 上下分割窗口 cols 左右分割窗口
<frameset>标记对浏览器窗口的分割存在不同的方式，主要分为以下几种类型：
● cols左右（水平）分割 <frameset cols="80,*">
● rows上下（垂直）分割 <frameset rows="80,*">
cols把框架分成左右两半,上下分割使用rows(分成上下两半)。每个框架的大小使用逗号隔开，最后一个使用*会把剩下的都分配给它
● 嵌套分割：左右上下分割都有。<frameset>里面再嵌套一个<frameset>标记
1 <frameset rows="100,*"> 2 <frame/> 3 <frameset cols="20%,*"> 4 <frame/> 5 </frameset> 6 </frameset>
效果图如下：
9.3 框架标记<frame>
<frameset>分割得到的每个子窗口都需要显示不同的页面内容，这些页面内容由<frame>标记来设置。<frame>是个单标记，它必须放在框架集frameset中，<frameset>分割了几个子窗口就必须对应几个<frame>标记。<frame>标记的常用属性有：
属性 属性值 说明
src 显示页面的URL地址
scrolling yes、no、auto 是否显示滚动条
noresize 禁止改变框架的尺寸大小
border 边框宽度，框架粗细
bordercolor 边框颜色
marginwidth 设置内容与框架窗口左右边框的距离
marginheight 设置内容与框架窗口上下边框的距离
基本语法：<frame src="01.html" name="test" />
<!-- src 框架的源文件地址，name 框架名(命名框架，以便超链接使用它作为目标窗口) -->
9.4 不支持框架标记<noframes>
当用户浏览器版本太低不支持框架时，浏览器制作人员无法改变这一现象，所能做的只是告诉用户事实，把显示给用户看的文本信息放在<body></body>标记对之间；而<noframes>放在</frameset>标记后面。
demo：
<frameset cols="130,*"><frame src="menu.html"/><frame src="introduce.html"/></frameset>
<noframes>
<body>抱歉，您的浏览器版本太低，不支持框架，无法看到页面内容，请使用较新的浏览器来浏览。</body>
</noframes>
当用户浏览器版本太低不支持框架时，浏览器窗口将显示<body></body>标记对之间的文本内容，否则将显示<frameset></frameset>中各个框架的页面内容。
9.5 浮动框架标记<iframe>（也有叫“内嵌框架”的）
浮动框架时一种特殊的框架页面，主要体现在这个框架时嵌套在一个HTML页面中，作为页面的一个组成部分。具有和<frame>一样的属性，也有自己的属性：
<iframe src="源文件地址" name="名" width="宽" height="高" align="对齐方式">
9.6 框架与超链接
一般情况下在框架中的a链接使用target属性实现框架内文件跳转时：
href(一直不变，即指向打开的文件路径不需要变)
_self -> 自己框架页面打开
_blank -> 新页面打开
_top -> 顶级框架页面打开
_parent -> 到其父级框架页面打开
_framename -> 将我们想要打开的页面在指定的框架中打开
demo：
首先，新建一个网页“框架集和框架.html”，为右侧框架窗口添加"name"标识，输入下面的内容：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>框架集frameset和框架frame</title> 6 </head> 7 <frameset cols="10%,*"> 8 <frame src="menu.html" /> 9 <frame src="http://qq.com" name="RightFrame" /> 10 </frameset> 11 </html>
然后，新建一个网页“menu.html”，在左侧窗口中，设置"target"属性显示的窗口名，输入下面的内容：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 </head> 7 <body> 8 <a href="http://qq.com/" target="RightFrame">qq</a> 9 <a href="http://baidu.com" target="RightFrame">百度</a> 10 <a href="http://taobao.com" target="RightFrame">淘宝</a> 11 </body> 12 </html>
如下图，刚开始打开这个“框架集和框架.html”这个网页时，显示的效果如下：
左边相当于是一个菜单，右边是显示效果，当你单击“百度”或者“淘宝”时都可以链接到相应网站。
这就是我使用frameset和frame来实现的菜单功能。
下面，讲一下框架与超链接。在"menu.html"中插入下面的代码：
<span><a href="http://qq.com" target="_parent">在父框架中打开qq</a></span>
这个时候，在浏览器中打开”框架集和框架.html“，单击”在父框架中打开qq“，这个时候，你会发现，整个网页直接转向了qq首页。”框架集和框架.html“就相当于”menu.html“的父框架，当”menu.html“中的a指定了target="_parent"时，就会直接在”框架集和框架.html“中打开这个网页。对于target="_self"或者其它效果就交给你们自己去修改玩玩。