HTML---Frame

帧在英文中被称为Frame,也就是我们平时所说的框架。它用来向浏览器窗口中装载多个HTML文件, 每个HTML文件占据一个帧,而多个帧可以同时显示在一个浏览器窗口中。它们组成了一个最大的帧, 也就是一个包含多个HTML文件的HTML文件。通常的使用方法是在一个帧中放置目录(即可供选择的链接), 然后将HTML文件显示在另一个帧中。

1.<frameset> </frameset>

<frameset></frameset>放在帧主文件的<body></body>的外边,也可以嵌在其它帧文件中,并且可以嵌套使用。此标志对用来定义主文件中有几个帧以及各个帧的排列情况。它具有rows和cols属性。使用,<frameset>标志时这两个属性至少要选择一个,否则浏览器只显示第一个定义的帧,剩下的一概不起作用了。

rows用来规定主文件中各个帧的行定位,而cols用来规定主文件中各个帧的列定位。这两个属性的取值可以是百分数、绝对像素值或星号(“*”),其中星号代表那些未被说明的空间,如果同一个属性中出现多个星号,则将剩下的未被说明的空间平均分配。同时,所有的帧按照rows和cols的值从左到右,然后从上到下排列。

2.<frame>

<frame>标志放在<frameset></frameset>之间,用来定义某一个具体的帧。<frame>标志具有src和name属性,这两个属性都是必须赋值的。src是此帧的源HTML文件名(包括网络路径,即相对路径或网址),浏览器将会在此帧中显示src指定的HTML文件。name是此帧的名字,这个名字供超文本链接标志<a href="" target="">中的target属性指定链接的HTML文件显示在哪一个帧中。

例如我们定义了一个帧,名字是main,在帧中显示的HTML文件名是xx.htm,则代码是<frame src="xx.htm" name="main">。若您有一个链接,您想在点击了这个链接后,把文件new.htm显示在名为main的帧中,则代码为<a href="new.htm" target="main">需要链接的文本</a>。这样就可以在一个帧中建立网站的目录,加入一系列链接,当点击链接以后,在另一个帧中显示被链接的HTML文件。

此外,<frame>标志还有scrolling和noresize属性,scrolling用来指定是否显示滚动轴,取值可以是“yes”(显示)、“no”(不显示)或“auto”(若需要会自动显示,不需要则自动不显示)。noresize属性直接加入标志中即可使用,不需赋值,它可以禁止用户调整帧的大小。

3.<noframes> </noframes>

<noframes></noframes。也是放在<frameset></frameset>标志对之间,用来在那些不支持帧的浏览器中显示文本或图象信息。在此标志对之间先紧跟<body></body。标志对,然后才可以使用我们在以前讲过的任何标志。

4.实例

帧这东西说起来比较枯燥,看得也郁闷,我们还是来看一段具体的示例:

(1)主文件:

 

<head>
<title>HTML教程之帧标志综合示例</title>
</head>
<frameset cols="25%,*>
<frame src="menu.htm" scrolling="no" name="left">
<frame src="menu1.htm" scrolling="auto" name="main">
<noframes><body>
<p>请检查您的浏览器,也许不支持帧显示</p>
</body>
</noframes>
</frameset>
</html>

 

 

(2)保存之后,再编写一个文件,注意不要跟上面的文件写到一起,把它另存成menu.htm:

<html>
<head>
<title>索引</title>
</head>
<body>
<p><font color="#ff0000">索引</font></p>
<p><a href="menu1.htm" target="main">链接到索引1</a></p>
<p><a href="menu2.htm" target="main">链接到索引2</a></p>
</body>
</html>

(3)接下来再编写一个menu1.htm:

<html>
<head>
<title>索引1</title>
</head>
<body>
<p align="center"><font color="#8000ff">
索引结果1</font></p>
</body>
</html>

 

(4)同样再编写一个menu2.htm:

<html>
<head>
<title>索引2</title>
</head>
<body>
<p align="center"><font color="#ff0080">
索引结果2</font></p>
</body>
</html>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值