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. 核心动画 CAAnimation 进阶

    转载自:http://www.cofcool.net/development/2015/06/20/ios-study-note-nine-CoreAnimation/ Core Animation, ...

  2. jdk8 eclipse luna market crashed

    THAT WORKS! Eclipse Luna starts normally when I first do the suggested: export SWT_GTK3=0 https://bu ...

  3. 读书笔记——thinking in java

    1.一切都是对象,用引用操作对象 1.1程序存储的地方 引用存放在堆栈区(通用的RAM),所有对象存储在堆(一种通用的内存池).堆和堆栈的区别:堆栈中的这些引用,java系统是要知道确切的生命周期,堆 ...

  4. JS的事件动态绑定机制

    动态添加标签+动态添加事件 window.onload=function(){ (已存在元素节点)事件绑定: (未来元素节点)事件绑定: } 它会扫描元素节点,如果元素节点存在(静态写好的),就可以绑 ...

  5. hibernate的优化

    1.使用双向一对多关联,不实用单项一对多2.不用一对一,使用一对多3.配置对象缓存,不使用集合缓存

  6. Python+Selenuim测试网站，只能打开Firefox浏览器却不能打开网页的解决方法

    最开始我使用的Selenium版本为2.48,Firefox版本为37,自动化打开网站的时候,可以正常打开. 后来由于Firefox的自检测更新,版本更新为47,导致版本不兼容,自动化打开网站浏览器时 ...

  7. unity3d 之本地推送

    1. 本地推送主要包括在android和ios上,下面所有的代码都是本人写的,经过测试是没有问题的,已经运用到项目中了.首先是接口INotification: using System; public ...

  8. Spring+struts+ibatis(一)环境准备工作

    首先我们先了解几个jar包的作用和一些未曾见过的接口和类 xwork-2.0.7.jar XWork是一个标准的Command模式实现,并且完全从web层脱离出来.Xwork提供了很多核心功能:前端拦 ...

  9. eclipse中安装配置maven

    1.首先说一下在windows中安装maven.非常简单... 到http://maven.apache.org/download.html中下载maven,截止笔者发文时,maven最新版本为mav ...

  10. mysql连接字符集default

    用mysql客户端工具输入中文数据报错,或乱码问题解决 数据库字符集为latin1时 用mysql工具,然后选择连接>l连接属性>高级>字符集选择default