HTML之FrameSet,Frame和Iframe区别


目录
  • 1 HTML之Frame框架
    • 1.1 各个介绍
      • 1.1.1 Frameset
      • 1.1.2 Frame
      • 1.1.3 Iframe
    • 1.2 区别
      • 1.2.1 Frameset与Frame的区别
      • 1.2.2 Frame与Iframe的区别
        • 1.2.2.1 两者大致区别
        • 1.2.2.2 放置位置区别
        • 1.2.2.3 高度控制区别
        • 1.2.2.4 放置表格
    • 1.3 综合示例

1 HTML之Frame框架

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

1.1 各个介绍

1.1.1 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:
colsrows两属性尽量不要同在一个标签中使用。若要实现下图架构,代码正确写法为:


  
  
    
    

【即,若想即使用cols又使用rows,可利用frameset嵌套实现】
注意2:
意思是:第一个框架占整个浏览器窗口的40%,剩下的空间平均分配给另外两个框架。
:意思是:浏览器窗口等分为四部分。

1.1.2 Frame

  1. 属性
    name:设置框架名称。此为必须设置的属性。
    src:设置此框架要显示的网页名称或路径。此为必须设置的属性。
    scrolling:设置是否要显示滚动条。设定值为auto, yes, no
    bordercolor:设置框架的边框颜色。
    frameborder:设置是否显示框架边框。设定值只有0、1;0 表示不要边框,1 表示要显示边框。
    noresize:设置框架大小是否能手动调节。
    marginwidth:设置框架边界和其中内容之间的宽度。
    marginhight:设置框架边界和其中内容之间的高度。
    width:设置框架宽度。
    height:设置框架高度。
    framespacing:设置框架与框架间的保留的空白距离。
  2. 用例

1.1.3 Iframe

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

  1. 属性
    align:设置垂直或水平对齐方式
    allowTransparency:设置或获取对象是否可为透明。
  2. 用例

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

1.2 区别

1.2.1 Frameset与Frame的区别

首先讲解FramesetFrame之间的区别
用来划分框架,每一个框架由标记。必须在之内使用
代码如下:





在上面的例子当中,把页面分为左右两个部分,左侧框架中的页面是admin_left.htm,右侧框架中的页面是admin_center.htm
注意:标记的框架顺序为从左至右或从上到下。

两者的差别如下:

  • 为框架标记,说明该网页文档为框架组成,并设定文档中组成框架集的框架的布局。
  • 用以设置组成框架集中各个框架的属性。

1.2.2 Frame与Iframe的区别

1.2.2.1 两者大致区别

  1. FrameIframe两者可以实现的功能基本相同,不过IframeFrame具有更多的灵活性
  2. frame不能脱离frameSet单独使用,iframe可以
  3. Iframe标记又叫浮动帧标记,可以用它将一个HTML文档嵌入在一个HTML中显示。它和Frame标记的最大区别是在网页中嵌入的所包含的内容与整个页面是一个整体,而所包含的内容是一个独立的个体,是可以独立显示的。另外,应用Iframe还可以在同一个页面中多次显示同一内容,而不必重复这段内容的代码。
  4. iframe用起来更灵活,不需要frame那么多讲究
    而且放的位置也可以自己设,iframe是内嵌的,比较灵活,不过也有不好的地方,就是位置在不同的浏览器和分辨率下有可能不同,有时会把本来好好的页面搞得变形

1.2.2.2 放置位置区别

frameset不能放在body中;如下可以正常显示:

 
     
     
 

嵌套在frameSet中的iframe必需放在body中;如下可以正常显示:

   
      
       
 
 

1.3 综合示例



综合示例





<body>
<p>对不起,您的浏览器不支持“框架”!</p>
</body>



【说明】
标志对也是放在标志对之间,用来在那些不支持框架的浏览器中显示文本或图像信息。在此标志对之间先紧跟标志对,然后才可以使用我们熟悉的任何标志。