首页 > 编程 > HTML > 正文

HTML框架怎么用

2020-03-24 16:32:10
字体:
来源:转载
供稿:网友
一个浏览器文档窗口只能显示一个网页文件,但是可以通过使用框架,在同一个浏览器窗口中显示不止一个页面,本文就来介绍一下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框架怎么用的详细内容,html教程

郑重声明:本文版权归原作者所有,转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们修改或删除,多谢。

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表