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. 开源题材征集 + MVC&EF Core 完整教程小结

    到目前为止,我们的MVC+EF Core 完整教程的理论部分就全部结束了,共20篇,覆盖了核心的主要知识点. 下一阶段是实战部分,我们将会把这些知识点串联起来,用10篇(天)来完成一个开源项目. 现向 ...

  3. AVR单片机教程——小结

    本文隶属于AVR单片机教程系列.   第一期挺让我失望的,是我太菜,没有把想讲的都讲出来.经常写了很多,然后一点一点删掉,最后就没多少了. 而且感觉难度不合适,处于很尴尬的位置.讲得简单,难的丢给库, ...

  4. jQuery Colorbox弹窗插件使用教程小结、属性设置详解

    jQuery Colorbox是一款弹出层,内容播放插件,效果极佳,当然我主要是用来弹出图片啦. jQuery Colorbox不仅有弹性动画效果,淡入淡出效果,幻灯片播放,宽度自定义,还能够ajax ...

  5. jQuery Colorbox弹窗插件使用教程小结、属性设置详解以及colorbox关闭

    jQuery Colorbox是一款弹出层,内容播放插件,效果极佳,当然我主要是用来弹出图片啦. jQuery Colorbox不仅有弹性动画效果,淡入淡出效果,幻灯片播放,宽度自定义,还能够ajax ...

  6. Frameset 框架

      <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="index.aspx.c ...

  7. AutoIT 测试GUI工具

    今天听到同事提到AutoIT,可以用来测试GUI窗口.了解一下这个工具. 以下内容引自: http://www.jb51.net/article/14870.htm (此url非原出处,该博主未注明原 ...

  8. git入门笔记汇总——（廖雪峰博客git入门）

    本文内容是对廖雪峰老师Git教程做的笔记,外加一些自己的学习心得,还抱着学以致用的心态来实践一番 如有显示错误 请移步本人github:git教程小结 Git学习笔记 Git简介 安装Git 创建版本 ...

  9. 取代iframe框架

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

随机推荐

  1. hdoj 5386 Cover

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5386 倒着推的一个挺暴力的题,看着和数学有关系,然而并没有, 不要一看到含有数学元素就考虑这是一个数学 ...

  2. IE下判断IE版本的语句...[if lte IE 6]……[endif]

    <!--[if lte IE 6]> <![endif]--> IE6及其以下版本可见 <!--[if lte IE 7]> <![endif]--> ...

  3. 传参方式由url携带改为post提交

    参考:http://www.cnblogs.com/logon/p/3218834.html 我们这里使用了iframe嵌套form表单POST提交,很简单,却能满足get|post等任何复杂情况的要 ...

  4. COM组件(ActiveX)控件注册失败

    这主要是由于旧版本的falsh player的原因,卸载干净并清理注册表,再次安装flash player即可. 具体方法: 1 在控制面板 卸载程序里面 卸载flash player 2 C:\WI ...

  5. jsonUtil 工具类

    package org.konghao.basic.util; import java.io.IOException; import java.io.StringWriter; import com. ...

  6. hdu 1861-游船出租

    游船出租                                                                                   Time Limit: 1 ...

  7. 数据结构复习：直接插入排序与二分插入排序的C++实现

    1.直接插入排序 直接插入排序的过程可以理解为一个固定长度的数组被分为两个集合,即已排序集合和未排序. 开始时已排序集合为空,而未排序集合即为整个数组.当排序开始后插入一个对象,已排序集合元素数目加1 ...

  8. [cocos2dx]怎样将Android手机游戏移植到电视？

    近期智能电视很火,我也买了一个小米电视,看片效果不错,网络也还算给力.可是,玩游戏比較蛋疼,要用遥控器,下了一个捕鱼达人试玩了一把,要用方向键控制大炮的方向和远近,再用确定键发射炮弹,根本没法玩... ...

  9. 【JavaScript】父子页面之间跨域通信的方法

    由于同源策略的限制,JavaScript跨域的问题,一直是一个比较棘手的问题,为了解决页面之间的跨域通信,大家煞费苦心,研究了各种跨域方案.之前也有小网同学分享过一篇“跨域,不再纠结” 开始照着尝试时 ...

  10. ls显示文件大小时显示单位

    在Linux中显示文件大小的时候,通常的做法是使用“ls -l”,显示的大小是文件的字节大小. 但是,如果文件比较大的话,显示起来不是特别易读,这个时候,可以使用“ls -lh”,就可以使用比较接近文 ...