HTML（10）框架

HTML（10）框架
一、框架

　　一个浏览器文档窗口只能显示一个网页文件，但是可以通过使用框架，在同一个浏览器窗口中显示不止一个页面。使用框架的页面主要包含两个部分，一个是框架集，另一个就是具体的框架文件。

　　框架多用于网站后台或者内网系统的布局。

　　1.框架集（<frameset></frameset>）：就是用来定义这一HTML文件为框架模式，并设定视窗如何分割的文件。通俗一点地说，框架集就是存放框架结构的文件，也是访问框架文件的入口文件。如果网页由左右二个框架组成，那么除了左右二个网页文件之外，还有一个总的框架集文件。在使用框架的页面中，<body>主体标记被框架标记<frameset>所代替。而对于框架页面中包含的每一个框架，都是通过<frame>标记来定义的。

　　rows属性：水平分割窗口。水平分割窗口是将页面沿水平方向切割，也就是将页面分成上下排列的多个窗口。rows中可以取多个值，每个值表示一个框架窗口的水平宽度，它的单位可以是像素，也可以是占浏览器的百分比。但是要注意的是，一般设定了几个rows的值，就需要有几个框架，也就是需要有相应数量的<frame>参数。
```
 1 <html>
 2 
 3 <head>
 4 
 5 <title>水平分割窗口的效果</title>
 6 
 7 </head>
 8 
 9 <frameset rows="30%,70%">
10 
11     <frame>
12 
13     <frame>
14 
15 </frameset>
16 
17 </html>
```
　　cols属性：垂直分割窗口。垂直分割窗口就是将页面沿垂直方向分割成多个窗口，也就是将页面分成左右排列的多个窗口。cols中可以取多个值，每个值表示一个框架窗口的水平宽度，它的单位可以是像素，也可以是占浏览器的百分比。与水平分割窗口向同，一般设定了几个cols的值，就需要有几个框架，也就是有几个<frame>参数。
```
 1 <html>
 2 
 3 <head>
 4 
 5 <title>垂直分割窗口的效果</title>
 6 
 7 </head>
 8 
 9 <frameset cols="20%,55%,25%">
10 
11     <frame>
12 
13     <frame>
14 
15     <frame>
16 
17 </frameset>
18 
19 </html>
```
　　frameborder属性：设置边框。在默认情况下，框架窗口的四周有一条边框线，通过frameborder参数可以调整边框线的显示情况。语法为：

<frameset frameborder="是否显示">或者<frame frameborder="是否显示">。 frameborder的取值只能为0或1。如果取值为0，那么边框线将会被隐藏；如果取值为1，边框线将会显示。在frameset中设置将会对整个框架有效，在frame中设置则只对当前这个框架有效。
```
 1 <html>
 2 
 3 <head>
 4 
 5 <title>设置框架窗口的边框显示效果</title>
 6 
 7 </head>
 8 
 9 <frameset rows="20%,55%,25%">
10 
11 <frame frameborder="1">
12 
13 <frameset cols="35%,65%" frameborder="0">
14 
15 <frame >
16 
17 <frame>
18 
19 </frameset>
20 
21 <frame frameborder="0">
22 
23 </frameset>
24 
25 </html>
```
　　framespacing属性：框架的边框宽度。框架的边框宽度在默认情况下是1像素，通过参数framespacing可以调整其大小。

　　语法：<frameset framespacing="边框宽度">

　　说明：边框宽度就是在页面中各个边框之间的线条宽度，以像素为单位。而这一参数只能对框架集使用，对单个框架无效。
```
 1 <html>
 2 
 3 <head>
 4 
 5 <title>设置框架的边框宽度</title>
 6 
 7 </head>
 8 
 9 <frameset rows="30%,70%" framespacing="10">
10 
11     <frame>
12 
13       <frameset cols="20%,55%,25%" framespacing="30">
14 
15         <frame>
16 
17         <frame>
18 
19         <frame>
20 
21       </frameset>
22 
23 </frameset>
24 
25 </html>
```
　　bordercolor属性：框架的边框颜色。使用参数bordercolor可以设置框架集的边框颜色。

　　语法：<frameset bordercolor="颜色代码">

　　说明：该参数同样只对整个框架集有效，对于单个框架无效。
```
 1 <html>
 2 
 3 <head>
 4 
 5 <title>设置框架的边框颜色</title>
 6 
 7 </head>
 8 
 9 <frameset rows="30%,70%" framespacing="10" bordercolor ="#CC99FF">
10 
11     <frame>
12 
13       <frameset cols="20%,55%,25%" framespacing="30" bordercolor ="#9900FF">
14 
15         <frame>
16 
17         <frame>
18 
19         <frame>
20 
21       </frameset>
22 
23 </frameset>
24 
25 </html>
```
　　2.框架（<frame>）和src属性。

　　框架结构中的各个页面都是一个单独的文字，而这些文件是通过src参数进行设置的。

　　语法：<frame src="页面源文件地址">

　　说明：页面文件是框架页面的具体内容的所在，对于没有设置源文件的框架，只是空白页面，是没有任何作用的。页面的源文件可以是正常的HTML文件，也可以是一个图片或者其他的文件。
```
 1 <html>
 2 
 3 <head>
 4 
 5 <title>设置页面源文件</title>
 6 
 7 </head>
 8 
 9 <frameset rows="30%,70%">
10 
11     <frame src="pic01.gif">
12 
13     <frame src="src01.html">
14 
15 </frameset>
16 
17 </html>
```
　　3.<noframes></noframes>标签

　　<noframes></noframes>标签用于浏览器不支持框架时显示页面内容。
```
 1 <html>
 2 <frameset cols="25%,50%,25%">
 3   <frame src="/example/html/frame_a.html">
 4   <frame src="/example/html/frame_b.html">
 5   <frame src="/example/html/frame_c.html">
 6 <noframes>
 7 <body>您的浏览器无法处理框架！</body>
 8 </noframes>
 9 </frameset>
10 </html>
```
二、浮动框架（<iframe>）

　　浮动框架是一种较为特殊的框架，它是在浏览器窗口中嵌套子窗口，也就是整个页面并不是框架页面，但是却包含一个框架窗口。在框架窗口内显示相应的页面内容。浮动框架又叫内联框架（inline frame），并且因此而得名。

　　语法：<iframe src="页面源文件"></iframe>　　

　　说明：与普通框架结构类似，浮动框架也可以设置很多参数，如 name、scrolling、frameborder等。但是与普通框架相比，浮动框架中不包含framespacing和bordercolor参数。

　　src属性：浮动框架中最基本的参数就是src，它用来设置浮动框架页面的源文件地址，也是浮动框架页面必需的参数。因为只有设置了源文件的内容，浮动框架才有意义。语法：<iframe src="页面源文件">

　　width和height属性：在普通框架结构中，由于框架就是整个浏览器窗口，因此不需要设置其大小。但是在浮动框架中，是插入到普通HTML页面中的，可以调整整个框架的大小。语法：<iframe src= src="浮动框架页面源文件" width="页面宽度" height="页面高度">，页面的宽度和高度值都以像素为单位。
```
1 <html>
2 <body>
3 <iframe src="/i/eg_landscape.jpg" width="550" height="310" ></iframe>
4 <p>一些老的浏览器不支持 iframe。</p>
5 <p>如果得不到支持，iframe 是不可见的。</p>
6 </body>
7 </html>
```
三、一个框架布局的示例
```
 1 <html>
 2 <head>
 3     <title>框架主页面 </title>
 4 </head>
 5 <frameset rows="20%,*">
 6     <frame name="topFame" src="3.html" noresize/>
 7         <frameset cols="240px,*">
 8             <frame name="leftFrame" src="1.html"/>
 9             
10             <frame name="rightFrame" src="2.html" marginwidth="20px" scrolling="no"/>
11             
12         </frameset>
13        <noframes>
14        
15         <body> 
16             该页面不支持frameset标签！
17         </body>
18     </noframes>
19  </frameset>
20 </html>
```
四、链接如何跳出框架

　　在网站后台布局中，框架用得比较多。在很多时候，我们需要跳出框架，重新加载页面。那么链接如何才能跳出框架呢？其实，只需要指定<a></a>标签的target属性为"_top"即可实现。下面是一个简单的例子。
```
 1 <html>
 2 
 3 <body>
 4 
 5 <p>被锁在框架中了吗？</p> 
 6 
 7 <a href="/index.html"
 8 target="_top">请点击这里！</a> 
 9 
10 </body>
11 </html>
```
摘自：http://www.w3school.com.cn/tiy/t.asp?f=html_frame_getfree
相关阅读:
MYSQL关键字的使用
 SESSION的使用
 COOKIE的使用
 ES6中的let与const---let与var的区别---详解
 JavaScript中四种数据类型检测的方法
 java数据类型
 讲Windows7的电脑搭建成服务器的教程
 ISS服务器
 用java编写一个万年历程序
 if 条件语句的用法
原文地址：https://www.cnblogs.com/sunyunh/p/2645989.html