html中的框架frameset和frame及iframe

　　通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。

　　通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面，简而言之，就是在一个窗口中显示多个页面。每个页面称之为一个框架。并且每个框架独立于其他的框架。

　　使用框架的坏处：必须同时跟踪多个框架（网页或HTML文档），整个页面很难打印。

　　1、框架标签（Frame）

　　简单的三框架页面：

　　<framesetcols="25%,50%,25%">

　　<framesrc="frame_a.htm">

　　<framesrc="frame_b.htm">

　　<framesrc="frame_c.htm">

　　</frameset>

　　所有主流浏览器都支持<frame>标签。

　　标签定义及使用说明

　　<frame>标签定义<frameset>中的子窗口（框架）。

　　<frameset>中的每个<frame>都可以设置不同的属性，比如border、scrolling,noresize等等。

　　HTML4.01与HTML5之间的差异

　　HTML5不支持<frame>标签，HTML4.01支持<frame>标签。

　　HTML与XHTML之间的差异

　　在HTML中，<frame>标签没有结束标签。在XHTML中，<frame>标签必须被正确地关闭。

　　可选的属性

　　属性值描述

　　frameborder 0

　　1 HTML5不支持。规定是否显示框架周围的边框。

　　longdesc URL HTML5不支持。规定一个包含有关框架内容的长描述的页面。

　　marginheight pixels HTML5不支持。规定框架的上方和下方的边距。

　　marginwidth pixels HTML5不支持。规定框架的左侧和右侧的边距。

　　name name HTML5不支持。规定框架的名称。

　　noresize noresize HTML5不支持。规定无法调整框架的大小。

　　scrolling yes

　　auto HTML5不支持。规定是否在框架中显示滚动条。

　　src URL HTML5不支持。规定在框架中显示的文档的URL。

　　标准属性

　　在HTML4.01中，<frame>标签支持如下标准属性：

　　属性值描述

　　class classname 规定元素的类名

　　id id 规定元素的唯一id

　　style style_definition 规定元素的行内样式

　　title text 规定元素的额外信息

　　事件属性

　　根据W3C的标准，在HTML4.01中，<frame>标签不支持任何的事件属性。

　　但是，所有的浏览器都支持onload事件。

　　基本的注意事项-有用的提示

　　假如一个框架有可见边框，用户可以拖动边框来改变它的大小。为了避免这种情况发生，可以在<frame>标签中加入：noresize="noresize"。

　　为不支持框架的浏览器添加<noframes>标签。

　　重要提示：不能将<body></body>标签与<frameset></frameset>标签同时使用！不过，假如你添加包含一段文本的<noframes>标签，就必须将这段文字嵌套于<body></body>标签内。（在下面的第一个实例中，可以查看它是如何实现的。）

　　如何使用<noframes>标签

　　<html>

　　<framesetcols="25%,50%,25%">

　　<framesrc="/example/html/frame_a.html">

　　<framesrc="/example/html/frame_b.html">

　　<framesrc="/example/html/frame_c.html">

　　<body>您的浏览器无法处理框架！</body>

　　</noframes>

　　</frameset>

　　</html>

　　2、框架结构标签（<frameset>）

　　框架结构标签（<frameset>）定义如何将窗口分割为框架

　　每个frameset定义了一系列行或列

　　rows/columns的值规定了每行或每列占据屏幕的面积

　　编者注：frameset标签也被某些文章和书籍译为框架集。

　　3、标签<iframe>标签

　　iframe是个内联框架，是在页面里生成个内部框架。

　　格式

　　属性

　　frameborder{int}：是否显示框架的边框；

　　src{URL}：指定一个资源(如网页、图片)的uri；

　　scrolling{boolean}：是否显示框架的滚动条；

　　width{int}：定义iframe的宽度；

　　height{int}：定义iframe的高度；

　　示例

　　<body>

　　<h3>HTML标签演示</h3>

　　<iframesrc=1.1-ShowHtml.htm></iframe>

　　</body>

　　注意事项

　　在"<iframe>我是内容</iframe>"内添加内容时，在展示页面不会显示添加的内容。所以还是使用src属性指定一个页面吧。

　　应用场景

　　1)版本升级页面，版本日志过多，可以把升级的信息放到一个iframe里。

　　2)富文本编辑框，如博客园的【新建随笔】区域。

　　4、frame,iframe,frameset之间的关系与区别

　　iframe是在html页面内嵌入框架框架内可以连接另一个页面，

　　如

　　<html>

　　<body>

　　<iframesrc="xxx.html"></iframe>

　　</body>

　　</html>

　　frameset在一个页面中设置一个或多个框架不能嵌套在body标签里

　　<html>

　　<framesrc=""></frame>

　　</frameset>

　　</html>

　　frameset它称为框架标记，是用来告知HTML文件是框架模式，并且设定可视窗口怎么分割

　　frame它只是设定某一个框架窗口中的参数属性

　　iframe它是在一个页面中嵌入一个框架窗口

　　frameset的属性

　　1、cols它是把整个画面竖向分割成几个画面

　　2、rows它是把整个画面横向分割成几个画面

　　3、frameborder它表示设定这个框架的边框值。它的值只有两个0或者1.0表示不显示边框，1表示显示边框。

　　4、border它表示了边框的宽度

　　5、bordercolor它是设定了框架边框的颜色

　　frame的属性

　　1、src指在此框架窗口中要显示的网页档案的链接

　　2、name指这个框架窗口的名称

　　3、framespacing指框架和框架之间保留的空白的距离

　　4、scrlling指该框架窗口是否要显示滚动条

　　6、noresize指框架的尺寸不能被随意拖动，改变大小

　　7、marginheight指框架顶部和底部边缘所保留的空间的大小

　　8、marginwidth指框架左右两边边缘所保留的空间的大小。

　　frameset和frame标签必须在一起使用

　　frame有一个重要的值是target，它表示在指定的框架中打开网页

　　而target有四个值

　　1、blank它表示在一个新的窗口中打开链接网页

　　2、top它表示在本窗口中打开链接网页

　　3、parent在上一层的框架中打开链接网页

　　4、self在超链接中打开链接网页

　　target是在编写导航时肯定会用到的

　　noframes指当浏览器完全显示不出这个框架时，页面就会显示出<noframes></noframes>内的内容。

　　iframe的属性

　　1、name是框架窗口的名称

　　2、align是框架窗口中内容的对其方式

　　3、width是框架窗口的宽，单位是pixels

　　4、height是框架窗口的长，单位是pixels

　　5、marginwidth是插入的文件和框架左右边缘所保留的空间

　　6、marginheight是插入的文件和框架上下边缘所保留的空间

　　7、frameborder是指是否显示边框。1表示显示边框，0表示不显示边框

　　8、scrolling是指是否允许使用滚动条。

　　利用frameset和frame可以把网页制作成所需要的不同大小的框架，可以用来布局。

　　iframe则是把一些网页嵌入到当前网页中，达到所需要的效果。

　　■框架概念：

　　所谓框架便是网页画面分成几个框窗，同时取得多个URL。只需要<FRAMESET><FRAME>即可，而所有框架标记需要放在一个总起的html档，这个档案只记录了该框架如何划分，不会显示任何资料，所以不必放入<BODY>标记，浏览这框架必须读取这档案而不是其它框窗的档案。<FRAMESET>是用以划分框窗，每一框窗由一个<FRAME>标记所标示，<FRAME>必须在<FRAMESET>范围中使用。如下例：

　　<framesetcols="50%,*">

　　<framename="hello"src="up2u.html">

　　<framename="hi"src="me2.html">

　　</frameset>

　　此例中<FRAMESET>把画面分成左右两相等部分，左便是显示up2u.html，右边则会显示me2.html这档案，<FRAME>标记所标示的框窗永远是按由上而下、由左至右的次序。

　　本节与Composer教室的【运用框架】大部分相同，只是本节增加了内容及较为详细，正如其它篇章一样并不会提及网页制作工具，若阁下学会了HTML相信你亦不会选用Composer，FrontPage一类的工具了。

　　■<FRAMESET><FRAME>：

　　<FRAMESET>称框架标记，用以宣告HTML文件为框架模式，并设定视窗如何分割。

　　<FRAME>则只是设定某一个框窗内的参数属性。

　　<FRAMESET>参数设定：

　　例子：<framesetrows="90,*"frameborder="0"border=0framespacing="2"bordercolor="#008000">

　　COLS="90,*"

　　垂直切割画面(如分左右两个画面)，接受整数值、百分数，*则代表占用馀下空间。数值的个数代表分成的视窗数目且以逗号分隔。例如COLS="30,*,50%"可以切成叁个视窗，第一个视窗是30pixels的宽度，为一绝对分割，第二个视窗是当分配完第一及第叁个视窗後剩下的空间，第叁个视窗则占整个画面的50%宽度为一相对分割。您可自己调整数字。

　　ROWS="120,*"

　　就是横向切割，将画面上下分开，数值设定同上。唯COLS与ROWS两参数尽量不要同在一个<FRAMESET>标记中，因Netacape偶然不能显示这类形的框架，尽采用多重分割。

　　frameborder="0"

　　设定框架的边框，其值只有0和1，0表示不要边框，1表示要显示边框。（避免使用yes或no）

　　border="0"

　　设定框架的边框厚度，以pixels为单位。

　　bordercolor="#008000"

　　设定框架的边框颜色。颜色值请参考【调色原理】。

　　framespacing="5"

　　表示框架与框架间的保留空白的距离。

　　<FRAME>参数设定：

　　例子：<framename="top"src="a.html"marginwidth="5"marginheight="5"scrolling="Auto"frameborder="0"noresizeframespacing="6"bordercolor="#0000FF">

　　SRC="a.html"

　　设定此框窗中要显示的网页档案名称，每个框窗一定要对应着一个网页档案。你可使用绝对路径或相对路径，有关此两者详见於【连结进阶】。

　　NAME="top"

　　设定这个框窗的名称，这样才能指定框架来作连结，必须但任意命名。

　　frameborder=0

　　设定框架的边框，其值只有0和1，0表示不要边框，1表示要显示边框。（避免使用yes或no）

　　framespacing="6"

　　表示框架与框架间的保留空白的距离。

　　bordercolor="#008000"

　　设定框架的边框颜色。颜色值请参考【HTML剖析】。

　　scrolling="Auto"

　　设定是否要显示卷轴，YES表示要显示卷轴，NO表示无论如何都不要显示，AUTO是视情况显示。

　　noresize

　　设定不让使用者可以改变这个框框的大小，亦没有设定此参数，使用者可以很随意地拉动框架，改变其大小。

　　marginhight=5

　　表示框架高度部份边缘所保留的空间。

　　marginwidth=5

　　表示框架宽度部份边缘所保留的空间。

　　以下是一些例子：（与Composer教室的【运用框架】相同）

　　例子HTMLCode

　　<framesetrows="80,*">

　　<framename="top"src="a.html">

　　<framename="bottom"src="b.html">

　　</frameset>

　　例子HTMLCode

　　<framesetrows="80,*,80">

　　<framename="top"src="a.html">

　　<framename="middle"src="b.html">

　　<framename="bottom"src="c.html">

　　</frameset>

　　例子HTMLCode

　　<framesetcols="150,*">

　　<framesetrows="80,*">

　　<framename="upper_left"src="a.html">

　　<framename="lower_left"src="b.html">

　　</frameset>

　　<framename="right"src="c.html">

　　</frameset>

　　例子HTMLCode

　　<framesetrows="80,*">

　　<framename="top"src="a.html">

　　<framesetcols="150,*">

　　<framename="lower_left"src="b.html">

　　<framename="lower_right"src="c.html">

　　</frameset>

　　例子HTMLCode

　　<framesetcols="150,*">

　　<framename="left"src="a.html">

　　<framesetrows="80,*">

　　<framename="upper_right"src="b.html">

　　<framename="lower_right"src="c.html">

　　</frameset>

　　■<NOFRAMES>：

　　当别人使用的浏览器太旧，不支援框架这个功能时，他看到的将会是一片空白。为了避免这种情况，可使用<NOFRAMES>这个标记，当使用者的浏览器看不到框架时，他就会看到<NOFRAMES>与</NOFRAMES>之间的内容，而不是一片空白。这些内容可以是提醒浏览转用新的浏览器的字句，甚至是一个没有框架的网页或能自动切换至没有框架的版本亦可。

　　应用方法：

　　在<frameset>标记范围加入</NOFRAMES>标记，以下是一个例子：

　　<framesetrows="80,*">

　　<body>

　　很抱歉，阁下使用的浏览器不支援框架功能，请转用新的浏览器。

　　</body>

　　</noframes>

　　<framename="top"src="a.html">

　　<framename="bottom"src="b.html">

　　</frameset>

　　若浏览器支援框架，那麽它不会理会<noframes>中的东西，但若浏览器不支援框架，由於不认识所有框架标记，不明的标记会被略过，标记包围的东西便被解读出来，所以放在<noframes>范围内的文字会被显示。

　　■<IFRAME>：

　　这标记只适用於IE(comet:也使用于FireFox)。它的作用是在一页网页中间插入一个框窗以显示另一个文件。它是一个围堵标记，但围着的字句只有在浏览器不支援iframe标记时才会显示，如<noframes>一样，可以放些提醒字句之类。通常iframe配合一个辨认浏览器的JavaScript会较好，若JavaScript认出该浏览器并非InternetExplorer便会切换至另一版本。PS：一定要使用</iframe>关闭，否则后面的内容显示不出来。

　　<iframe>的参数设定如下：

　　例子：<iframesrc="iframe.html"name="test"align="MIDDLE"width="300"height="100"marginwidth="1"marginheight="1"frameborder="1"scrolling="Yes"></iframe>

　　src="iframe.html"

　　欲显示於此框窗的文件来源除档案名称，必要加上相对或绝对路径。

　　name="test"

　　此框窗名称，这是连结标记的target参数所需要的，

　　align="MIDDLE"

　　可选值为left,right,top,middle,bottom，作用不大

　　width="300"height="100"

　　框窗的宽及长，以pixels为单位。

　　marginwidth="1"marginheight="1"

　　该插入的文件与框边所保留的空间。

　　frameborder="1"

　　使用1表示显示边框，0则不显示。（可以是yes或no）

　　scrolling="Yes"

　　使用Yes表示容许卷动（内定），No则不容许卷动

　　frame和iframe的区别

　　1、frame不能脱离frameSet单独使用，iframe可以；

　　2、frame不能放在body中；如下可以正常显示：

　　<framesetrows="50%,*">

　　<framename="frame1"

　　src="test1.htm"/>

　　<framename="frame2"

　　src="test2.htm"/>

　　</frameset>

　　如下不能正常显示：

　　<body>

　　<framesetrows="50%,*">

　　<framename="frame1"

　　src="test1.htm"/>

　　<framename="frame2"

　　src="test2.htm"/>

　　</frameset>

　　<body>

　　3、嵌套在frameSet中的iframe必需放在body中；如下可以正常显示：

　　<body>

　　<iframename="frame1"

　　src="test1.htm"/>

　　<iframename="frame2"

　　src="test2.htm"/>

　　</frameset>

　　</body>

　　如下不能正常显示：

　　<iframename="frame1"

　　src="test1.htm"/>

　　<iframename="frame2"

　　src="test2.htm"/>

　　</frameset>

　　4、不嵌套在frameSet中的iframe可以随意使用；

　　如下均可以正常显示：

　　<body>

　　<iframename="frame1"

　　src="test1.htm"/>

　　<iframename="frame2"

　　src="test2.htm"/>

　　</body>

　　<iframename="frame1"

　　src="test1.htm"/>

　　<iframename="frame2"

　　src="test2.htm"/>

　　5、frame的高度只能通过frameSet控制；iframe可以自己控制，不能通过frameSet控制，如：

　　<framesetrows="50%,*">

　　<framename="frame1"

　　src="test1.htm"/>

　　<framename="frame2"

　　src="test2.htm"/>

　　</frameset>

　　<body>

　　<iframeheight="30%"

　　name="frame1"src="test1.htm"/>

　　<iframeheight="100"

　　name="frame2"src="test2.htm"/>

　　</frameset>

　　</body>

　　5、frame和iframe的区别

　　1、frame不能脱离frameSet单独使用，iframe可以；

　　2、frame不能放在body中；如下可以正常显示：

　　<framesetrows="50%,*">

　　<framename="frame1"src="test1.htm"/>

　　<framename="frame2"src="test2.htm"/>

　　</frameset>

　　如下不能正常显示：

　　<body>

　　<framesetrows="50%,*">

　　<framename="frame1"src="test1.htm"/>

　　<framename="frame2"src="test2.htm"/>

　　</frameset>

　　<body>

　　3、嵌套在frameSet中的iframe必需放在body中；如下可以正常显示：

　　<body>

　　<iframename="frame1"src="test1.htm"/>

　　<iframename="frame2"src="test2.htm"/>

　　</frameset>

　　</body>

　　如下不能正常显示：

　　<iframename="frame1"src="test1.htm"/>

　　<iframename="frame2"src="test2.htm"/>

　　</frameset>

　　4、不嵌套在frameSet中的iframe可以随意使用；

　　如下均可以正常显示：

　　<body>

　　<iframename="frame1"src="test1.htm"/>

　　<iframename="frame2"src="test2.htm"/>

　　</body>

　　<iframename="frame1"src="test1.htm"/>

　　<iframename="frame2"src="test2.htm"/>

　　5、frame的高度只能通过frameSet控制；iframe可以自己控制，不能通过frameSet控制，如：

　　<framesetrows="50%,*">

　　<framename="frame1"src="test1.htm"/>

　　<framename="frame2"src="test2.htm"/>

　　</frameset>

　　<body>

　　<iframeheight="30%"name="frame1"src="test1.htm"/>

　　<iframeheight="100"name="frame2"src="test2.htm"/>

　　</frameset>

　　</body>

　　6、如果在同一个页面使用了两个以上的iframe，在IE中可以正常显示，在firefox中只能显示出第一个；使用两个以上的frame在IE和firefox中均可正常

　　以上代码在IE7和firefox2.0中测试。

　　另外相关论坛窃取总结:-)

　　1Frame与Iframe两者可以实现的功能基本相同，不过Iframe比Frame具有更多的灵活性。

　　frame是整个页面的框架，iframe是内嵌的网页元素，也可以说是内嵌的框架

　　Iframe标记又叫浮动帧标记，可以用它将一个HTML文档嵌入在一个HTML中显示。它和Frame标记的最大区别是在网页中嵌入的<Iframe></Iframe>所包含的内容与整个页面是一个整体，而<Frame></Frame>所包含的内容是一个独立的个体，是可以独立显示的。另外，应用Iframe还可以在同一个页面中多次显示同一内容，而不必重复这段内容的代码。

　　2iframe可以放到表格里面。frame则不行。

　　<table>

　　<tr>

　　</tr>

　　</table>

　　3frame必须在frameset里

　　而frameset不能与body元素共存，也就说有frameset元素的文档只能是一个框架集，不能有别的东东

　　4IFrame是放在网业的什么地方都行

　　但是frame只能放到上下左右四个方向

　　5iframme是活动帧

　　而frame是非活动帧

　　iframe使用方法如下

　　<iframescr="sourcefile"frameborder=0width="width"height="height"></iframe>

　　iframe用起来更灵活，不需要frame那么多讲究

　　而且放的位置也可以自己设

　　iframe是内嵌的，比较灵活，不过也有不好的地方，就是位置在不同的浏览器和分辨率下有可能不同，有时会把本来好好的页面搞得变形

　　iframe就没有这个限制

　　6iframe可以加在网页中任何一个地方。

　　而frame通常做框架页

　　iframe是一个网页中的子框架,两网页间是父子关系

　　frame是框架,由多个并列的网页构成

　　楼上的说得对，iframe是浮动的。就像是浮动面板，而frame是固定的。只能四个方向上的。

　　你可以直接在网页里用一下，看看效果就行了。

　　7<iframe>是被嵌入在网页的元素，而<frame>用于组成一个页面的多个框架！

　　iframe更利于版面的设计

　　frame一条直一条竖的不美观

　　frame的那一条线也可以去掉的呦！只不过，iframe更方便对其进行数据的交换吧！

　　iframe可以放置到你想放的任意位置,控制起来比frame方便

　　8iframe是内部帧，可以嵌在一个页面里面，设置内部帧的属性可以使得整体看上去象一个完整的页面，而不是由多个页面组成，frame有frame的好处，比如何多网站，上面放广告条，左边放菜单，右边放内容，这样上边和左边的内容都可不动，只刷新右边页面的内容，选择iframe还是frame完全看自己的需求。

　　说白了，用IFrame比用Frame少一个文件（FrameSet），但支持Frame的浏览器比较多。

　　我为我公司做的网站，整个是用了iframe，linux带的浏览器都不支持，哎呀，丑呀，不过我还是喜欢用iframe

　　还有iframe可以放在表格里,然后ifame设置成width=100%height=100%

　　我就可以只需修改我的表格的宽度和高度,这样的话有利于排版

　　其实Frame是一个控件

　　使用方法和Panle相同。

　　frame是把网页分成多个页面的页面。它要有一个框架集页面frameset

　　iframe是一个浮动的框架,就是在你的页面里再加上一个页面,

　　<frame>用来把页面横着或竖着切开，

　　<iframe>用来在页面中插入一个矩形的小窗口

　　Frame一般用来设置页面布局,将整个页面分成规则的几块,每一块里面包含一个新页面.

　　iframe用来在页面的任何地方插入一个新的页面.