社区 学习 工具库 休闲
搜索
简体中文
首页 > web前端 > html教程 > 正文

HTML框架怎么用

墨辰丷
发布： 2018-06-04 15:40:33
原创
8067 人浏览过

一个浏览器文档窗口只能显示一个网页文件，但是可以通过使用框架，在同一个浏览器窗口中显示不止一个页面，本文就来介绍一下HTML框架

一、框架

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

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

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

rows属性：水平分割窗口。水平分割窗口是将页面沿水平方向切割，也就是将页面分成上下排列的多个窗口。rows中可以取多个值，每个值表示一个框架窗口的水平宽度，它的单位可以是像素，也可以是占浏览器的百分比。但是要注意的是，一般设定了几个rows的值，就需要有几个框架，也就是需要有相应数量的参数。

  <html>
  
  <head>
  
  <title>水平分割窗口的效果</title>
  
  </head>
  
 <frameset rows="30%,70%">
 
     <frame>
 
     <frame>
 
 </frameset>
 
 </html>
登录后复制

cols属性：垂直分割窗口。垂直分割窗口就是将页面沿垂直方向分割成多个窗口，也就是将页面分成左右排列的多个窗口。cols中可以取多个值，每个值表示一个框架窗口的水平宽度，它的单位可以是像素，也可以是占浏览器的百分比。与水平分割窗口向同，一般设定了几个cols的值，就需要有几个框架，也就是有几个参数。

  <html>
  
  <head>
  
  <title>垂直分割窗口的效果</title>
  
  </head>
  
<frameset cols="20%,55%,25%">
 
     <frame>
 
     <frame>
 
     <frame>
 
 </frameset>
 
 </html>
登录后复制

frameborder属性：设置边框。在默认情况下，框架窗口的四周有一条边框线，通过frameborder参数可以调整边框线的显示情况。语法为：

或者。 frameborder的取值只能为0或1。如果取值为0，那么边框线将会被隐藏；如果取值为1，边框线将会显示。在frameset中设置将会对整个框架有效，在frame中设置则只对当前这个框架有效。

  <html>
  
  <head>
  
  <title>设置框架窗口的边框显示效果</title>
  
  </head>
  
  <frameset rows="20%,55%,25%">
 
 <frame frameborder="1">
 
 <frameset cols="35%,65%" frameborder="0">
 
 <frame >
 
 <frame>
 
 </frameset>
 
 <frame frameborder="0">
 
 </frameset>
 
 </html>
登录后复制

framespacing属性：框架的边框宽度。框架的边框宽度在默认情况下是1像素，通过参数framespacing可以调整其大小。

语法：

说明：边框宽度就是在页面中各个边框之间的线条宽度，以像素为单位。而这一参数只能对框架集使用，对单个框架无效。

  <html>
  
  <head>
  
  <title>设置框架的边框宽度</title>
  
  </head>
  
 <frameset rows="30%,70%" framespacing="10">
     <frame>
 
       <frameset cols="20%,55%,25%" framespacing="30">
 
         <frame>
 
         <frame>
 
         <frame>
 
       </frameset>
 
 </frameset>
 
 </html>
登录后复制

bordercolor属性：框架的边框颜色。使用参数bordercolor可以设置框架集的边框颜色。

语法：

说明：该参数同样只对整个框架集有效，对于单个框架无效。

  <html>
  
  <head>
  
  <title>设置框架的边框颜色</title>
  
  </head>
  
 <frameset rows="30%,70%" framespacing="10" bordercolor ="#CC99FF">
 
     <frame>
 
      <frameset cols="20%,55%,25%" framespacing="30" bordercolor ="#9900FF">
 
         <frame>
 
         <frame>
 
         <frame>
 
       </frameset>
 
 </frameset>
 
 </html>
登录后复制

2.框架（）和src属性。

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

语法：

说明：页面文件是框架页面的具体内容的所在，对于没有设置源文件的框架，只是空白页面，是没有任何作用的。页面的源文件可以是正常的HTML文件，也可以是一个图片或者其他的文件。

  <html>
  
  <head>
  
  <title>设置页面源文件</title>
  
  </head>
  
 <frameset rows="30%,70%">
 
     <frame src="pic01.gif">
     <frame src="src01.html">
 
 </frameset>
 
 </html>
登录后复制

3.标签

标签用于浏览器不支持框架时显示页面内容。

  <html>
 <frameset cols="25%,50%,25%">
    <frame src="/example/html/frame_a.html">
    <frame src="/example/html/frame_b.html">
    <frame src="/example/html/frame_c.html">
  <noframes>
  <body>您的浏览器无法处理框架！</body>
  </noframes>
  </frameset>
 </html>
登录后复制

二、浮动框架（　　

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

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