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

相关文章

Android kotlin中 Channel 和 Flow 的区别和选择使用场景分析

《Androidkotlin中Channel和Flow的区别和选择使用场景分析》Kotlin协程中,Flow是冷数据流,按需触发,适合响应式数据处理;Channel是热数据流,持续发送,支持... 目录一、基本概念界定FlowChannel二、核心特性对比数据生产触发条件生产与消费的关系背压处理机制生命周期

Javaee多线程之进程和线程之间的区别和联系(最新整理)

《Javaee多线程之进程和线程之间的区别和联系(最新整理)》进程是资源分配单位,线程是调度执行单位,共享资源更高效,创建线程五种方式:继承Thread、Runnable接口、匿名类、lambda,r... 目录进程和线程进程线程进程和线程的区别创建线程的五种写法继承Thread,重写run实现Runnab

C++中NULL与nullptr的区别小结

《C++中NULL与nullptr的区别小结》本文介绍了C++编程中NULL与nullptr的区别,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编... 目录C++98空值——NULLC++11空值——nullptr区别对比示例 C++98空值——NUL

Conda与Python venv虚拟环境的区别与使用方法详解

《Conda与Pythonvenv虚拟环境的区别与使用方法详解》随着Python社区的成长,虚拟环境的概念和技术也在不断发展,:本文主要介绍Conda与Pythonvenv虚拟环境的区别与使用... 目录前言一、Conda 与 python venv 的核心区别1. Conda 的特点2. Python v

Go语言中make和new的区别及说明

《Go语言中make和new的区别及说明》:本文主要介绍Go语言中make和new的区别及说明,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录1 概述2 new 函数2.1 功能2.2 语法2.3 初始化案例3 make 函数3.1 功能3.2 语法3.3 初始化

深度解析Spring Boot拦截器Interceptor与过滤器Filter的区别与实战指南

《深度解析SpringBoot拦截器Interceptor与过滤器Filter的区别与实战指南》本文深度解析SpringBoot中拦截器与过滤器的区别,涵盖执行顺序、依赖关系、异常处理等核心差异,并... 目录Spring Boot拦截器(Interceptor)与过滤器(Filter)深度解析:区别、实现

前端如何通过nginx访问本地端口

《前端如何通过nginx访问本地端口》:本文主要介绍前端如何通过nginx访问本地端口的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、nginx安装1、下载(1)下载地址(2)系统选择(3)版本选择2、安装部署(1)解压(2)配置文件修改(3)启动(4)

HTML中meta标签的常见使用案例(示例详解)

《HTML中meta标签的常见使用案例(示例详解)》HTMLmeta标签用于提供文档元数据,涵盖字符编码、SEO优化、社交媒体集成、移动设备适配、浏览器控制及安全隐私设置,优化页面显示与搜索引擎索引... 目录html中meta标签的常见使用案例一、基础功能二、搜索引擎优化(seo)三、社交媒体集成四、移动

HTML input 标签示例详解

《HTMLinput标签示例详解》input标签主要用于接收用户的输入,随type属性值的不同,变换其具体功能,本文通过实例图文并茂的形式给大家介绍HTMLinput标签,感兴趣的朋友一... 目录通用属性输入框单行文本输入框 text密码输入框 password数字输入框 number电子邮件输入编程框

HTML img标签和超链接标签详细介绍

《HTMLimg标签和超链接标签详细介绍》:本文主要介绍了HTML中img标签的使用,包括src属性(指定图片路径)、相对/绝对路径区别、alt替代文本、title提示、宽高控制及边框设置等,详细内容请阅读本文,希望能对你有所帮助... 目录img 标签src 属性alt 属性title 属性width/h