今天在做onebyone作业的时候，为了使自己的页面更加美观，我便使用了frame框架，百度了他的用法，总结如下

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="top.jsp" name="topFrame" scrolling="No" noresize="noresize" id="topFrame"/>
  <frameset cols="213,*" frameborder="no" border="0" framespacing="0">
    <frame src="left.jsp" name="leftFrame" scrolling="No" noresize="noresize" id="leftFrame"/>
    <frame src="main.jsp" 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="top.jsp" 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="*.jsp" 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>标志对，然后才可以使用我们熟悉的任何标志。

frame标签使用的更多相关文章

  1. 区别CSS中display：box；inline；none以及HTML中 <frame> 标签<table> 标签的 frame 属性

    区别display:box:display:inline:display:none三者的不同 display:block的特点是: block是Display默认的值.总是在新行上开始:该对象随后的内 ...

  2. HTML <frame> 标签的 src 属性

    HTML <frame> 标签 实例 src 属性规定在框架中显示的文档的位置: <html> <frameset cols="50%,50%"> ...

  3. 如何给frame标签的src属性以及a标签的href属性自动设值

    <frame src="" id="main" name="main" marginwidth="0" margi ...

  4. html <frame>标签使用

    标签定义 frameset 中的一个特定的窗口(框架) frameset中的每个框架都可以设置不同的属性,比如border,scrolling,noresize等 frame的常用属性 width: ...

  5. <iframe>和<frame>标签属性详解

    iframe>元素会创建包含另外一个文档的内联框架(即行内框架): 一.align 属性(不赞成) align属性规定iframe相对于周围元素的水平和垂直对齐方式,因为iframe元素是行内元 ...

  6. frame标签

    frame中有一个属性scrolling,可以这样设置它 <frame src="top.html" noresize scrolling="no"/&g ...

  7. frame标签和frameset

    框架: 属性 值 描述 frameborder 0 1 规定是否显示框架周围的边框. longdesc URL 规定一个包含有关框架内容的长描述的页面. marginheight pixels 定义框 ...

  8. Tkinter 之Frame标签

    一.参数说明 语法 作用 width 设置 Frame 的宽度默认值是 0 height 设置 Frame 的高度默认值是 0 background(bg) 设置 Frame 组件的背景颜色 bord ...

  9. Window 对象 HTML框架标签（Frame）

    Window 对象 Window 对象表示浏览器中打开的窗口. 如果文档包含框架(frame 或 iframe 标签),浏览器会为 HTML 文档创建一个 window 对象,并为每个框架创建一个额外 ...

随机推荐

  1. 如何用Photoshop画一个发光金币（unity游戏素材教程）

    做好的发光金币预览图: 以下为如何用Photoshop画一个发光金币教程: [1]如上图1-2,新建,名称改为Coin,宽度20像素,高度20像素,分辨率72,背景白色: [2]使用Alt+Shift ...

  2. [boost] : lightweight_test库

    lightweight_test轻量级单元测试框架, 只支持最基本的单元测试, 不支持测试用例, 测试套件的概念, 简单小巧, 适合要求不高或者快速测试的工作. 基本用法 需要包含头文件#includ ...

  3. ES(5): ES Cluster modules settings

    ES cluster 提供了针对不同模块的参数设置,可通过修改集群上各个节点的elasticsearch.yml文件,也可在集群运行时通过api接口来更新(https://www.elastic.co ...

  4. 【jmeter】jmeter环境搭建

    一. 工具描述 apache jmeter是100%的java桌面应用程序,它被设计用来加载被测试软件功能特性.度量被测试软件的性能.设计jmeter的初衷是测试web应用,后来又扩充了其它的功能.j ...

  5. listener does not currently know of 。。。。

    打开Oracle的 listener.ora 文件: (../oracle/product/10.2.0/db_1/network/admin/listener.ora) 设置环境变量: Oracle ...

  6. iis运行asp.net页面提示“服务器应用程序不可用”的解决办法_.NET.

    原因:主要是iis安装在了net framwork之后 解决办法:需要在IIS中重新注册.net 也就是要用到系统盘: cd c:\windows\microsoft.net\framework\v2 ...

  7. DokuWiki

    DokuWiki 1.点我,点我,dokuwiki使用教程一 2.点我,点我,dokuwiki使用教程二 3.点我,点我,dokuWiki语法 4.点我,点我,WARP插件

  8. PHP中header的用法总结

    来源 :http://blog.sina.com.cn/s/blog_7298f36f01011dxv.html header的用法 header()函数的作用是:发送一个原始 HTTP 标头[Htt ...

  9. 字符串strip相关函数

    s.strip(rm) 删除s字符串中开头.结尾处,位于 rm删除序列的所有字符,但只要遇到非rm序列中的字符就停止s.lstrip(rm) 删除s字符串中开头处,位于 rm删除序列的所有字符,,但只 ...

  10. Java堆外内存之三：堆外内存回收方法

    一.JVM内存的分配及垃圾回收 对于JVM的内存规则,应该是老生常谈的东西了,这里我就简单的说下: 新生代:一般来说新创建的对象都分配在这里. 年老代:经过几次垃圾回收,新生代的对象就会放在年老代里面 ...