今天在做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. bzoj 2119 股市的预测——枚举长度的关键点+后缀数组

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=2119 就是找差分序列上中间差 m 的相等的两段. 考虑枚举这样一段的长度 L .可以把序列分 ...

  2. R(1):中文乱码解决方案

    读取csv文件出现中文乱码方案,增加编码格式参数 read.csv(trainPath,header=TRUE,stringsAsFactors=TRUE,encoding = "UTF-8 ...

  3. EXPLAIN执行计划中要重点关注哪些要素(转)

    EXPLAIN的结果中,有哪些关键信息值得注意呢? MySQL的EXPLAIN当然和ORACLE的没法比,不过我们从它输出的结果中,也可以得到很多有用的信息. 总的来说,我们只需要关注结果中的几列: ...

  4. C# 日期格式化的中的(/)正斜杠的问题（与操作系统设置有关）

    Console.WriteLine(DateTime.Now.ToString("yyyy/MM/dd" )); //这行代码, 如果你在系统日期格式默认的情况下输出 2013/0 ...

  5. POSIX 消息队列 之 概述 链接方式

    NAMEmq_overview —— POSIX消息队列概述 DESCRIPTIONPOSIX消息队列允许进程以消息的形式交换数据.此API与System V消息队列(msgget(2),msgsnd ...

  6. 上Google Adsense个人的一点体验

    最近我想开通一个Google Adsense帐号,因为以前注册过一个Google帐号,所以我以为两个是可以共通的,因为很久没上Google帐号,我记不太清密码了,所以我先是登录了Google,登上去了 ...

  7. ubuntu 查看系统是32位还是64位

    查看cpu信息 cat /proc/cpiinfo 查看ubuntu版本: cat /etc/issue 查看系统是32位还是64位 方法1: #查看long的位数,返回32或64 getconf L ...

  8. TensorFlow相关的一些技巧

    谷歌开发技术推广工程师 Laurence Moroney 在 Google Cloud Next 大会上进行了一段 42 分钟的演讲,主题是「What's New with TensorFlow?」. ...

  9. 学习MongoDB 八： MongoDB索引（索引限制条件）（二）

    一.简介 我们上一篇介绍了索引基本操作,通过db.collection.createIndex(keys, options)语法创建索引,我们继续介绍地理空间索引.索引的限制,使我们在MongoDB时 ...

  10. Python3 引入sqlite3时出现错误：ModuleNotFoundError: No module named '_sqlite3'

    在Python3 中内置了SQLite3,但是在编译安装完之后执行: import sqlite3 出现错误: ModuleNotFoundError: No module named '_sqlit ...