转自：https://i.cnblogs.com/posts?categoryid=1121494

框架（Frame）也就是所谓的分割窗口、分割画面、框窗效果（还真是五花八门），这个技巧在运用上问题比较多，用的好的话，有助于网友快速且有条理的浏览网页，整理不好的话，呵呵...那笑话可就闹大了。

【框架的基本概念】 
 1. 首先，各位先看看右手边这张图，我们将利用这张图来作解说，这样子，讲起来可能会清楚一点。 OK！我们可以看见，右边的这个窗口，一共分为 1 、 2 、 3 三个框架，每一个框架，各有其显示的内容分别是a.htm、b.htm、c.htm三个档案。然而左下角的那个 index.htm 是做什么用的呢？  
2. 原来，左下角的这个档案 index.htm，就是要告诉计算机，我们要将画面分割成这样，也就是说，所有Frame的卷标，其实都只摆在 index.htm 这个档案里。（当然，不是档名一定要叫做 index.htm 取其它档名也是可以的。） 
3. 这样明白了吗？总之，您要分割几个框框，就一定会有几个对应的html档案（假如您要分割100个框框，就要有100个html档就对了。），另外，还会多一个档案是来告诉计算机要如何分割的。（也就是例中的 index.htm 档啦！）

【开始分割】 
1. 别急、别急，分割窗口可是一门学问，要分割也是要一步一步来的。看看刚刚那例子，想象画面是一个蛋糕，你要怎么割，才能割成那样呢？

原始码 呈现结果
<HTML>
<HEAD>
<TITLE>框窗实作</TITLE>
</HEAD>
</HTML>
　

2. 各位会发现，奇怪，在上面的语法中，怎么都没见到<BODY></BODY>熟悉的身影？呵呵...没错，它已经被待会儿要加进去的<FRAMESET></FRAMESET>卷标给取代了！也就是说，如果我们要分割画面，就要先用<FRAMESET>卷标告诉计算机说：『喂！我要开始分割了！』此时，<BODY>是派不上用场的，所以躲到一旁凉快去了！  
3. 现在开始动手割割看啰！我们先将画面分成左右两边（左边就是框窗 1 了，右边就暂定为 2 等一下还要分割呢！），如下图：

原始码 呈现结果
<HTML>
<HEAD>
<TITLE>框窗实作</TITLE>
</HEAD>
<FRAMESET COLS=120,* > 
　<FRAME SRC=a.htm NAME=1>
　<FRAME SRC=b.htm NAME=2> 
</FRAMESET> 
</HTML>  
　  

4. 在<FRAMESET>中，我们要告诉计算机到底是要左右分（COLS）？还是上下分（ROWS）。一开始我们是左右分，所以我们写成<FRAMESET COLS=120,* >。COLS=120,* 就是说，左边那一栏强制定为 120点，右边则随窗口大小而变。除了直接写点数外，我们亦可用百分比来表示，例如COLS=20%,80%也是可以的。

5. 然后，再将右边的框窗再割成上下两个画面（也就是框窗 2 和 3 了）。如下图：

原始码 呈现结果
<HTML>
<HEAD>
<TITLE>框窗实作</TITLE>
</HEAD>
<FRAMESET COLS=120,*>
　<FRAME SRC=a.htm NAME=1>
　<FRAMESET ROWS=100,*>
　　<FRAME SRC=b.htm NAME=2>
　　<FRAME SRC=c.htm NAME=3>
　</FRAMESET>
</FRAMESET>
</HTML>  
　  
 

6. 看见了没？原本的<FRAME SRC=b.htm NAME=2>（在第 3 点的语法中）被另一组<FRAMESET ROWS=100,* >所取代了！所以要注意喔！第二组<FRAMESET ROWS=100,* >是被第一组<FRAMESET COLS=120,* >所包围起来的喔！（乱七八糟了对不对？）
7. 呵呵...不知不觉就大功告成了，其实只要将最后完成的那些语法存成 index.htm，然后再准备三个档 a.htm 、b.htm 、c.htm那么就完工啰！当然，这是一个最简单的分割法，我们会再将一些进阶的卷标在底下一一说明。
【其它卷标参数说明】
<FRAMESET COLS=120,* frameborder=0 framespacing=5> 
1. COLS=120,*
就是垂直切割画面啦！你可以一次切成左右两个画面，当然也可以切成三个，很简单只要写成 COLS=30,*,50 （数字随便您自己调整啦！），依此类推，四个以上当然就是四组数字啦！

2. ROWS=120,*
就是横向切割画面，也就是将画面上下分开，切法同上。

3. frameborder=0
设定框架的边框，其值只有 0 和 1 ， 0 就是不要边框， 1 就是要显示边框。边框是无法调整粗细的。

4. framespacing=5
表示框架与框架间的保留空白的距离，以免看起来太挤。 
<FRAME SRC=a.htm NAME=1 frameborder=0 scrolling=no noresize marginhight=2 marginwidth=2> 
1. SRC=a.htm
设定此框架中要显示的网页名称，每个框架一定要对应一个网页，否则就会产生错误，这里就是要您填入对应网页的名称。（如果该网页在不同目录，记得路径要写清楚） 
2. NAME=1
设定这个框架的名称，这样才能指定框架来作连结，所以一定要设定喔！当然名称随你高兴取名。
3. frameborder=0
设定框架的边框，其值只有 0 和 1 ， 0 就是不要边框， 1 就是要显示边框。边框是无法调整粗细的。 
4. scrolling=no
设定是否要显示滚动条，YES是要显示滚动条，NO是无论如何都不要显示，AUTO是视情况显示。 
5. noresize
设定不让使用者可以改变这个框框的大小，如果没有设定这个参数，使用者可以很容易的拉动框架，改变其大小。 
6. marginhight=2
表示框架高度部份边缘所保留的空间。 
7. marginwidth=2
表示框架宽度部份边缘所保留的空间。 
【相关用法】 
◆ <noframe> 
1. 使用方法：<noframe>请换有支持Frame功能的浏览器</noframe> 
2. 卷标解说：有些浏览器较为老旧，无法显示Frame的功能，因此，就要使用此卷标，让这些网友知道，该换换浏览器了。或者，你也可以在这卷标中，摆上没有Frame语法的网页卷标，那么，没有支持Frame功能的浏览器，便会自动显示没有Frame语法的网页。 
◆ target=框窗名称 
1. 使用方法：<A HREF=d1-1.htm target=3>显示内容</A> 
2. 卷标解说：常常有一个情况是，我想在框窗 1 的地方按下连结，但是希望他的内容出现在框窗 3 中（请参照上面那个图），那应该如何写呢？就像上面加个 target=框窗名称 就行啦！
◆ target=_top 
1. 使用方法：<A HREF=http://www.wrclub.net target=_top>网人俱乐部</A> 
2. 卷标解说：有时候，在框窗里会连结到别的站，却发现，新连结的这个站，竟然被框窗包住了，不但难看，而且可能会吃上官司说！所以，这时候你必需加入 target=_top这个参数，那么，这个新连到的网站，就会重新占据整个屏幕啦！

HTML基础第七讲---框架的更多相关文章

  1. Linux基础知识第七讲,用户权限以及用户操作命令

    目录 Linux基础知识第七讲,用户权限以及用户操作命令 一丶简介linux用户,用户权限,组的概念. 1.1 基本概念 1.2 组 1.3 ls命令查看权限. 二丶用户权限修改命令 1.chmod ...

  2. day 52 Django基础一之web框架的本质

    Django基础一之web框架的本质   django第一天 本节目录 一 web框架的本质及自定义web框架 二 模板渲染JinJa2 三 MVC和MTV框架 四 Django的下载安装 五 基于D ...

  3. day 65 Django基础一之web框架的本质

      Django基础一之web框架的本质   django第一天 本节目录 一 web框架的本质及自定义web框架 二 模板渲染JinJa2 三 MVC和MTV框架 四 Django的下载安装 五 基 ...

  4. 《ArcGIS Engine+C#实例开发教程》第七讲 图层符号选择器的实现2

    原文:<ArcGIS Engine+C#实例开发教程>第七讲 图层符号选择器的实现2 摘要:在第七讲 图层符号选择器的实现的第一阶段中,我们完成了符号选择器窗体的创建与调用.在第二阶段中, ...

  5. 计算机网络基础——OSI七层网络模型

    计算机网络基础——OSI七层网络模型 OSI的是什么: 开放式系统互联通信参考模型(英语:Open System Interconnection Reference Model,缩写为 OSI),简称 ...

  6. Java实习生常规技术面试题每日十题Java基础（七）

    目录 1. Java设计模式有哪些? 2.GC是什么?为什么要有GC? 3. Java中是如何支持正则表达式. 4.比较一下Java和JavaSciprt. 5.Math.round(11.5) 等于 ...

  7. Yaf零基础学习总结2-Yaf框架的安装

    接着上一篇文章<Yaf零基础学习总结1-Yaf框架简介>我们对Yaf框架有那么一个大概的了解了,但是对于程序员来说,那些文字都是表面的,他们最想的就是开始敲代码了.当然这也是学习Yaf框架 ...

  8. Stanford机器学习---第七讲. 机器学习系统设计

    原文:http://blog.csdn.net/abcjennifer/article/details/7834256 本栏目(Machine learning)包括单参数的线性回归.多参数的线性回归 ...

  9. Java语言基础（七）

    Java语言基础(七) 今天在公司多呆了会,回来晚了 一.自动类型转换 在Java中,数据是可以转换的  例如可以将byte类型的赋给int类型的 这里希望你了解内存的变化,例如 在这里,我想你应该知 ...

随机推荐

  1. BZOJ 1103 DFS序+线段树

    思路: 先搞出来DFS序 进入这个点 +1 出这个点 -1 线段树维护前缀和 (因为还要修改) 搞定 修改的时候只修改底下节点就OK了 (边权–>点权 不多说) //By SiriusRen # ...

  2. C++中友元类使用场合

    在C++中我们可以將函数定义成类的友元函数,这样在函数中就可以访问类的私有成员.与函数相同,类也可以作为另一个类的友元类,在友元类中可以访问另外一个类的所有成员. 声明友元类的方法很简单,只需在类中写 ...

  3. cf 828 A. Restaurant Tables

    A. Restaurant Tables time limit per test 1 second memory limit per test 256 megabytes input standard ...

  4. Ubuntu16.04安装java（Oracle jre)

    一.安装1.从Oracle官网下载jre-8u161-linux-x64.tar.gz安装文件(下载与浏览器位数一样) 2.切换到所需的安装目录.键入: pipci@ubuntu:~$ cd /usr ...

  5. 【Henu ACM Round#15 E】 A and B and Lecture Rooms

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 最近公共祖先. (树上倍增 一开始统计出每个子树的节点个数_size[i] 如果x和y相同. 那么直接输出n. 否则求出x和y的最近 ...

  6. CSS 类、伪类和伪元素差别具体解释

    CSS中的类(class)是为了方便过滤(即选择)元素,以给这类元素加入样式,class是定义在HTML文档树中的. 可是这在一些情况下是不够用的,比方用户的交互动作(悬停.激活等)会导致元素状态发生 ...

  7. linux杂谈（十八）:DNSserver的配置（一）

    1.DNSserver简单介绍 域名系统(英文:Domain Name System,縮寫:DNS)是因特网的一项服务. 它作为将域名和IP地址相互映射的一个分布式数据库,可以使人更方便的訪问互联网. ...

  8. 基于二叉树和双向链表实现限制长度的最优Huffman编码

    该代码採用二叉树结合双向链表实现了限制长度的最优Huffman编码,本文代码中的权重所有採用整数值表示.http://pan.baidu.com/s/1mgHn8lq 算法原理详见:A fast al ...

  9. 论Nim中的 proc 和 method

    在Nim中.proc 是定义过程的keyword.method 是定义方法的keyword.它们之间根本的差别是proc定义的过程是静态绑定.method定义的方法是动态绑定.谈到静态绑定.动态绑定又 ...

  10. [转]C语言字节对齐问题详解

    C语言字节对齐问题详解 转载:https://www.cnblogs.com/clover-toeic/p/3853132.html 引言 考虑下面的结构体定义: typedef struct{ ch ...