百分百源码网-让建站变得如此简单! 登录 注册 签到领金币!

主页 | 如何升级VIP | TAG标签

当前位置: 主页>网站教程>html5教程> HTML框架如何用
分享文章到:

HTML框架如何用

发布时间:09/01 来源:未知 浏览: 关键词:
一个阅读器文档窗口只能显示一个网页文件,但是可以通过使用框架,在统一个阅读器窗口中显示不止一个页面,本文就来介绍一下HTML框架

一、框架

一个阅读器文档窗口只能显示一个网页文件,但是可以通过使用框架,在统一个阅读器窗口中显示不止一个页面。使用框架的页面主要包括两个部分,一个是框架集,另一个就是详细的框架文件。

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

1.框架集(<frameset></frameset>):就是用来定义这一HTML文件为框架模式,并设定视窗怎样分割的文件。通俗一点地说,框架集就是存置框架构造的文件,也是拜访框架文件的入口文件。假如网页由摆布二个框架组成,那么除了摆布二个网页文件之外,还有一个总的框架集文件。在使用框架的页面中,<body>主体标志被框架标志<frameset>所代替。而关于框架页面中包括的每一个框架,都是通过<frame>标志来定义的。

rows属性:水平分割窗口。水平分割窗口是将页面沿水平标的目的切割,也就是将页面分成上下摆列的多个窗口。rows中可以取多个值,每个值表示一个框架窗口的水平宽度,它的单位可以是像素,也可以是占阅读器的百分比。但是要留意的是,一样设定了几个rows的值,就需要有几个框架,也就是需要有响应数目的<frame>参数。

  <html>
  
  <head>
  
  <title>水平分割窗口的结果</title>
  
  </head>
  
 <frameset rows="30%,70%">
 
     <frame>
 
     <frame>
 
 </frameset>
 
 </html>

cols属性:垂直分割窗口。垂直分割窗口就是将页面沿垂直标的目的分割成多个窗口,也就是将页面分成摆布摆列的多个窗口。cols中可以取多个值,每个值表示一个框架窗口的水平宽度,它的单位可以是像素,也可以是占阅读器的百分比。与水平分割窗口向同,一样设定了几个cols的值,就需要有几个框架,也就是有几个<frame>参数。

  <html>
  
  <head>
  
  <title>垂直分割窗口的结果</title>
  
  </head>
  
<frameset cols="20%,55%,25%">
 
     <frame>
 
     <frame>
 
     <frame>
 
 </frameset>
 
 </html>

frameborder属性:设定边框。在默许状况下,框架窗口的四周有一条边框线,通过frameborder参数可以调整边框线的显示状况。语法为:

<frameset frameborder="可否显示">或者<frame 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可以调整其大小。

语法:<frameset 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可以设定框架集的边框色彩。

语法:<frameset 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.框架(<frame>)和src属性。

框架构造中的各个页面都是一个独自的文字,而这些文件是通过src参数停止设定的。

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

说明:页面文件是框架页面的详细内容的所在,关于没有设定源文件的框架,只是空白页面,是没有任何作用的。页面的源文件可以是正常的HTML文件,也可以是一个图片或者其他的文件。

  <html>
  
  <head>
  
  <title>设定页面源文件</title>
  
  </head>
  
 <frameset rows="30%,70%">
 
     <frame src="pic01.gif">
     <frame src="src01.html">
 
 </frameset>
 
 </html>

3.<noframes></noframes>标签

<noframes></noframes>标签用于阅读器不支撑框架时显示页面内容。

  <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>

二、浮动框架(<iframe>)

浮动框架是一种较为非凡的框架,它是在阅读器窗口中嵌套子窗口,也就是整个页面并不是框架页面,但是却包括一个框架窗口。在框架窗口内显示响应的页面内容。浮动框架又叫内联框架(inline frame),并且因此而得名。

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

说明:与一般框架构造相似,浮动框架也可以设定许多参数,如 name、scrolling、frameborder等。 但是与一般框架比拟,浮动框架中不包括framespacing和bordercolor参数。

src属性:浮动框架中最根本的参数就是src,它用来设定浮动框架页面的源文件地址,也是浮动框架页面必需的参数。由于只要设定了源文件的内容,浮动框架才成心义。语法:<iframe src="页面源文件">

width和height属性:在一般框架构造中,由于框架就是整个阅读器窗口,因此不需要设定其大小。但是在浮动框架中,是插入到一般HTML页面中的,可以调整整个框架的大小。语法:<iframe src= src="浮动框架页面源文件" width="页面宽度" height="页面高度">,页面的宽度和高度值都以像素为单位。

 <html>
 <body>
<iframe src="/i/eg_landscape.jpg" width="550" height="310" ></iframe>
 <p>一些老的阅读器不支撑 iframe。</p>
 <p>假如得不到支撑,iframe 是不成见的。</p>
 </body>
 </html>

三、一个框架规划的示例

  <html>
  <head>
      <title>框架主页面 </title>
  </head>
 <frameset rows="20%,*"><!--框架集,控件文件的容器-->
      <frame name="topFame" src="3.html" noresize/>
        <frameset cols="240px,*">
            <frame name="leftFrame" src="1.html"/>
      <frame name="rightFrame" src="2.html" marginwidth="20px" scrolling="no"/>
             
         </frameset>
        <noframes>
        <!--noframes标志傍边可以包括body标志-->
         <body> 
             该页面不支撑frameset标签!
         </body>
     </noframes>
  </frameset>
 </html>

四、链接怎样跳出框架

在网站后台规划中,框架用得比力多。在许多时候,我们需要跳出框架,从新加载页面。那么链接怎样才能跳出框架呢?其实,只需要指定<a></a>标签的target属性为"_top"即可实现。下面是一个简便的例子。

  <html>
  
  <body>
  
  <p>被锁在框架中了吗?</p> 
  
  <a href="/index.html"
  target="_top">请点击这里!</a> 
  
 </body>
 </html>

总结:以上就是本篇文的全部内容,但愿能对大家的学习有所帮忙。

相关引荐:

HTML框架标签的作用总结

HTML框架标签的实例利用

HTML框架标签frameset、frame、iframe、noframes

介绍HTML框架(Frames)到底有什么用?

以上就是HTML框架如何用的具体内容,更多请关注百分百源码网其它相关文章!

打赏

打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

百分百源码网 建议打赏1~10元,土豪随意,感谢您的阅读!

共有151人阅读,期待你的评论!发表评论
昵称: 网址: 验证码: 点击我更换图片
最新评论

本文标签

广告赞助

能出一分力是一分吧!

订阅获得更多模板

本文标签

广告赞助

订阅获得更多模板