frame，是网页开发必须掌握的知识。例如后台架构、局部刷新，页面分割，都是frame的用途表现，尤其是后台页面制作，使用frame会给用户带来非常舒适的使用感受。
frame知识点包括（frameset标签、frame标签、iframe标签）。下面就对其一一介绍。
 
一、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：
cols与rows两属性尽量不要同在一个<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="*,*,*,*">
意思是：浏览器窗口等分为四部分。
 
二、frame
1. 属性
①name
设置框架名称。此为必须设置的属性。
②src
设置此框架要显示的网页名称或路径。此为必须设置的属性。
③scrolling
设置是否要显示滚动条。设定值为auto, yes, no。
④bordercolor
设置框架的边框颜色。

⑤frameborder

设置是否显示框架边框。设定值只有0、1；0 表示不要边框，1 表示要显示边框。

⑥noresize

设置框架大小是否能手动调节。
⑦marginwidth
设置框架边界和其中内容之间的宽度。
⑧marginhight
设置框架边界和其中内容之间的高度。
⑨width
设置框架宽度。
⑩height
设置框架高度。
2. 用例
<frame src="???" name="topFrame" scrolling="No" noresize="noresize" marginwidth="10" marginhight="10" width="400" height="800" />
 
三、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标签与frameset、frame标签的验证方法不同，是XHTML 1.0 Transitional。且iframe是放在body标签之内，而frameset、frame是放在body标签之外。
 
四、综合示例
<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>标志对，然后才可以使用我们熟悉的任何标志。
 
 
最后需要说明一点：
如果将代码按照我以上所写写到VS中报错的话，例如：
或者
解决方法如下：
工具→选项→文本编辑器→HTML→验证→Internet Explorer 6.0
 
好了，通过以上内容，大家再多加练习，就会慢慢熟悉frame的相关知识了，用好了的话你会发现真的挺好。至于frame系列标签的事件方法，一般用的不是非常多，需要的话，大家自己再查吧。【呵呵，其实本人还没有用到过】

Frameset使用教程的更多相关文章

  1. Frameset使用教程 小结

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

  2. 取代iframe框架

    一.frameset1. 属性①border设置框架的边框粗细.②bordercolor设置框架的边框颜色.③frameborder设置是否显示框架边框.设定值只有0.1:0 表示不要边框,1 表示要 ...

  3. html教程系列--form frameset

    <font> 标签: 规定文本的字体.字体尺寸.字体颜色.不建议直接使用,可以使用样式表替代. <footer> 标签:定义公用的底部信息.通常包含文档的作者.版权信息.使用条 ...

  4. HTML+CSS教程（二）frameset框架和iframe内嵌

    一.框架 (frameset)1.用<frameset></frameset>代替了<body></body>2.rows设置行的占页面的百分比:col ...

  5. html快速入门（基础教程+资源推荐）

    1.html究竟是什么? 从字面上理解,html是超文本标记语言hyper text mark-up language的首字母缩写,指的是一种通用web页面描述语言,是用来描述我们打开浏览器就能看到的 ...

  6. HTML 30分钟入门教程

    作者:deerchao 转载请注明来源 本文目标 30分钟内让你明白HTML是什么,并对它有一些基本的了解.一旦入门后,你可以从网上找到更多更详细的资料来继续学习. 什么是HTML HTML是英文Hy ...

  7. js基础到精通全面教程--JS教程

    适合阅读范围:对JavaScript一无所知-离精通只差一步之遥的人 基础知识:HTML JavaScript就这么回事1:基础知识 1 创建脚本块 1: <script language=”J ...

  8. HTML简明教程（二）

    HTML简明教程(二) 一.HTML 图像 二.HTML 表格 三.HTML 列表 四.HTML div和 span 五.HTML 布局 六.HTML 表单和输入 七.HTML 框架 八.HTML内联 ...

  9. html5，html5教程

    html5,html5教程 1.向后兼容 HTML5是这样被定义的:能向后兼容目前UA处理内容的方式.为了让语言更简单,一些老的元素和Attribute被舍弃.比如一些纯粹用于展现的元素(译注:即非语 ...

随机推荐

  1. Qt5：Qt程序不在任务拦显示图标

    setWindowFlags(Qt::Tool | Qt::WindowStaysOnTopHint | Qt::X11BypassWindowManagerHint); 回头再写

  2. MyEclipse10.7使用egit托管项目到GitHub

    原文出处:http://www.xuebuyuan.com/2126438.html 1.注册一个github账户:(www.github.com)点击打开链接 注册完成后,登录github后点击右上 ...

  3. 安卓图表引擎AChartEngine(四) - 源码示例 嵌入Acitivity中的折线图

    前面几篇博客中都是调用ChartFactory.get***Intent()方法,本节讲的内容调用ChartFactory.get***View()方法,这个方法调用的结果可以嵌入到任何一个Activ ...

  4. vm10虚拟机安装Mac OS X10.10教程

    VM10装Mac OS X 10.9.3及更新到Mac OS X 10.10,让你的windows也能玩Swift .  最近WWDC放出终极大招——新的编程语言Swift(雨燕),导致一大波程序员的 ...

  5. JS——基础知识（二）

    1.变量提升问题 <script> var num=10; fun(); function fun(){ console.log(num); var num=20; } </scri ...

  6. 创建表结构相同的表，表结构相同的表之间复制数据，Oracle 中 insert into XXX select from 的用法

    /**1. 用select 创建相同表结构的表*/create table test_tbl2 as select * from test_tbl1 where 1<>1; /**  2. ...

  7. php 中的全局变量的理解

    $GLOBALS 是php中的一个全局变量的数组. $GLOBALS['var1']  代表的是 外部的全局变量 $var1 本身.global $var是外部$var的同名引用或者指针 例1: &l ...

  8. JBPM4.4 基本使用

    JBPM工作流环境搭建: 1.先下载JBPM框架 2.安装JBPM图形编辑插件 注:插件在jbpm-4.4\install\src\gpd 目录下 创建工程导入JBPM依赖jar包 注:jar包目录j ...

  9. Nginx 中 nginx.conf 详解

    #定义Nginx运行的用户和用户组 user www www; #nginx进程数,建议设置为等于CPU总核心数. worker_processes 8; #全局错误日志定义类型,[ debug | ...

  10. STM32 定时器用于外部脉冲计数（转）

    源:STM32 定时器用于外部脉冲计数 STM32 定时器(一)——定时器时间的计算 STM32的定时器是灰常NB的,也是灰常让人头晕的(当然是对于白菜来说的). STM32中的定时器有很多用法: ( ...