HTML之FrameSet,Frame和Iframe区别

2024-06-22 16:58

本文主要是介绍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. 用例
<frameset cols="213,*" frameborder="no" border="0" framespacing="0">

注意1:
colsrows两属性尽量不要同在一个<frameset>标签中使用。若要实现下图架构,代码正确写法为:

<frameset rows="59,*" cols="*" frameborder="no" border="0" framespacing="0"><frame src="???" name="topFrame" scrolling="No" noresize="noresize" id="topFrame"/><frameset cols="213,*" frameborder="no" border="0" framespacing="0"><frame src="???" name="leftFrame" scrolling="No" noresize="noresize" id="leftFrame"/><frame src="???" name="mainFrame" id="mainFrame"/>

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

1.1.2 Frame

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

1.1.3 Iframe

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

  1. 属性
    align:设置垂直或水平对齐方式
    allowTransparency:设置或获取对象是否可为透明。
  2. 用例
<iframe name="123" 
align="middle" 
marginwidth="0" 
marginheight=0 
src="???" frameborder="0" 
scrolling="no" width="776" 
height="2500"></iframe>

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

1.2 区别

1.2.1 Frameset与Frame的区别

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

<FRAMESET border=1 frameSpacing=1 borderColor=#47478d rows=* cols=180,*>
<FRAME src="inc/admin_left.htm" name=left scrolling=no id="left">
<FRAME src="inc/admin_center.htm" name=main scrolling="no">
</FRAMESET>

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

两者的差别如下:

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

1.2.2 Frame与Iframe的区别

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

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

<frameset rows="50%,*"> <frame   name="frame1"   src="test1.htm"/>  <frame   name="frame2"   src="test2.htm"/>  
</frameset> 

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

  <body> <frameset>  <iframe   name="frame1"   src="test1.htm"/>  <iframe   name="frame2"   src="test2.htm"/>  </frameset>  </body> 

不嵌套在frameSet中的iframe可以随意使用;
如下均可以正常显示:

<body> <iframe   name="frame1"   src="test1.htm"/>  <iframe   name="frame2"   src="test2.htm"/>  
</body> <!--<body>--> <iframe   name="frame1"   src="test1.htm"/>  <iframe   name="frame2"   src="test2.htm"/>  
<!--</body>--> 
1.2.2.3 高度控制区别

frame的高度只能通过frameSet控制;iframe可以自己控制,不能通过frameSet控制,如:

<!--<body>--> 
<frameset rows="50%,*"> <frame   name="frame1"   src="test1.htm"/>  <frame   name="frame2"   src="test2.htm"/>  
</frameset> 
<!--</body>--> <body> 
<frameset> <iframe height="30%"  name="frame1"   src="test1.htm"/>  <iframe height="100"  name="frame2"   src="test2.htm"/>  
</frameset> 
</body> 
1.2.2.4 放置表格

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

<table> 
<tr> 
<td><iframe id="" src=""></iframe></td><td></td> 
</tr> 
</table> 

1.3 综合示例

<html>
<head>
<title>综合示例</title>
</head>
<frameset cols="25%,*">
<frame src="menu.htm" scrolling="no" name="Left">
<frame src="page1.htm" scrolling="auto" name="Main">
<noframes>
<body>
<p>对不起,您的浏览器不支持“框架”!</p>
</body>
</noframes>
</frameset>
</html>

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

这篇关于HTML之FrameSet,Frame和Iframe区别的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1084880

相关文章

Java逻辑运算符之&&、|| 与&、 |的区别及应用

《Java逻辑运算符之&&、||与&、|的区别及应用》:本文主要介绍Java逻辑运算符之&&、||与&、|的区别及应用的相关资料,分别是&&、||与&、|,并探讨了它们在不同应用场景中... 目录前言一、基本概念与运算符介绍二、短路与与非短路与:&& 与 & 的区别1. &&:短路与(AND)2. &:非短

Nginx实现前端灰度发布

《Nginx实现前端灰度发布》灰度发布是一种重要的策略,它允许我们在不影响所有用户的情况下,逐步推出新功能或更新,通过灰度发布,我们可以测试新版本的稳定性和性能,下面就来介绍一下前端灰度发布的使用,感... 目录前言一、基于权重的流量分配二、基于 Cookie 的分流三、基于请求头的分流四、基于请求参数的分

C# 委托中 Invoke/BeginInvoke/EndInvoke和DynamicInvoke 方法的区别和联系

《C#委托中Invoke/BeginInvoke/EndInvoke和DynamicInvoke方法的区别和联系》在C#中,委托(Delegate)提供了多种调用方式,包括Invoke、Begi... 目录前言一、 Invoke方法1. 定义2. 特点3. 示例代码二、 BeginInvoke 和 EndI

MySQL常见的存储引擎和区别说明

《MySQL常见的存储引擎和区别说明》MySQL支持多种存储引擎,如InnoDB、MyISAM、MEMORY、Archive、CSV和Blackhole,每种引擎有其特点和适用场景,选择存储引擎时需根... 目录mysql常见的存储引擎和区别说明1. InnoDB2. MyISAM3. MEMORY4. A

基于Canvas的Html5多时区动态时钟实战代码

《基于Canvas的Html5多时区动态时钟实战代码》:本文主要介绍了如何使用Canvas在HTML5上实现一个多时区动态时钟的web展示,通过Canvas的API,可以绘制出6个不同城市的时钟,并且这些时钟可以动态转动,每个时钟上都会标注出对应的24小时制时间,详细内容请阅读本文,希望能对你有所帮助...

HTML5 data-*自定义数据属性的示例代码

《HTML5data-*自定义数据属性的示例代码》HTML5的自定义数据属性(data-*)提供了一种标准化的方法在HTML元素上存储额外信息,可以通过JavaScript访问、修改和在CSS中使用... 目录引言基本概念使用自定义数据属性1. 在 html 中定义2. 通过 JavaScript 访问3.

CSS模拟 html 的 title 属性(鼠标悬浮显示提示文字效果)

《CSS模拟html的title属性(鼠标悬浮显示提示文字效果)》:本文主要介绍了如何使用CSS模拟HTML的title属性,通过鼠标悬浮显示提示文字效果,通过设置`.tipBox`和`.tipBox.tipContent`的样式,实现了提示内容的隐藏和显示,详细内容请阅读本文,希望能对你有所帮助... 效

前端bug调试的方法技巧及常见错误

《前端bug调试的方法技巧及常见错误》:本文主要介绍编程中常见的报错和Bug,以及调试的重要性,调试的基本流程是通过缩小范围来定位问题,并给出了推测法、删除代码法、console调试和debugg... 目录调试基本流程调试方法排查bug的两大技巧如何看控制台报错前端常见错误取值调用报错资源引入错误解析错误

在Dockerfile中copy和add的区别及说明

《在Dockerfile中copy和add的区别及说明》COPY和ADD都是Dockerfile中用于文件复制的命令,但COPY仅用于本地文件或目录的复制,不支持自动解压缩;而ADD除了复制本地文件或... 目录在dockerfile中,copy 和 add有什么区别?COPY 命令ADD 命令总结在Doc

Vue中动态权限到按钮的完整实现方案详解

《Vue中动态权限到按钮的完整实现方案详解》这篇文章主要为大家详细介绍了Vue如何在现有方案的基础上加入对路由的增、删、改、查权限控制,感兴趣的小伙伴可以跟随小编一起学习一下... 目录一、数据库设计扩展1.1 修改路由表(routes)1.2 修改角色与路由权限表(role_routes)二、后端接口设计