HTML超文本标记语言（六）——框架

最新推荐文章于 2023-03-19 17:51:13 发布

weixin_30326515

最新推荐文章于 2023-03-19 17:51:13 发布

阅读量108

点赞数

原文链接：http://www.cnblogs.com/haidaojiege/p/6655562.html

版权

一、<frameset>和<frame>标签

框架的作用：通过使用框架，可以在同一个浏览器窗口中显示不止一个页面。每份HTML文档称为一个框架，并且每个框架都独立于其他框架。

框架结构（框架集）标签：<frameset></framenset>定义如何将窗口分割为框架；

通过cols属性定义列，通过rows定义行。

框架标签：<frame></frame>定义了放置在每个框架中的HTML文档。

一个简单的框架示例：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title>A simple frame</title>
 5 </head>
 6 <frameset rows="50%,50%">
 7     <frame src="frame1.html">
 8     <frameset cols="20%,80%">
 9         <frame src="frame2.html" noresize="noresize">
10         <frame src="frame3.html">
11     </frameset>
12 <noframes>
13 <body>您的浏览器无法处理框架！</body>
14 </noframes>
15 </frameset>
16 </html>

A simple frame

<noframes>标签：要为不支持框架的浏览器设置<noframes>标签，不能将 <body></body> 标签与 <frameset></frameset> 标签同时使用！不过，假如你添加包含一段文本的 <noframes> 标签，就必须将这段文字嵌套于 <body></body> 标签内。

<cols>和<rows>属性：定义文档窗口中框架或框架集的列或行的大小及数目。都接受用引号括起来并用逗号分开的值列表，这些数值指定了框架的绝对（像素点）或相对（百分比或其余空间）宽度（对列而言），或者绝对或相对高度（对行而言）。

创建三行的框架，其高度分别占窗口的1/4、1/2、1/4，如下：

<frameset rows="25%,50%,25%">

创建四列的框架，第一列宽度占窗口的10%，第二列宽度占剩余空间的3/5，第三、四列宽度分别占剩余空间的1/5。如下：

<frmeset cols="10%,3*,*,*">

<noresize>属性：假如一个框架有可见边框，用户可以拖动边框来改变它的大小。为了避免这种情况发生，可以在 <frame> 标签中加入：noresize="noresize"。

<frame src="frame1.html" noresize=""noresize>

二、嵌套的<frameset>标签

创建一个两列的布局，其中第一列有两行，第二列有三行。做法是通过在一个指定列的顶级<frameset>标签内嵌套两个包含行说明的<frameset>标签。

三、导航框架——利于name属性创建锚

<!DOCTYPE html>
<html>
<head>
    <title>Frame Layout</title>
</head>
<frameset rows="60%,*" cols="*,15%,60%">
    <frame src="frame1.html" noresize="noresize">
    <frame src="frame2.html">
    <frame src="frame3.html" name="fill_me">
    <frame scrolling=yes src="frame4.html">
    <frame src="frame5.html">
    <frame src="frame6.html" id="test">
    <noframes>
    <body>
    Sorry,this document can be viewed only with a frame-capable browser.
    <a href="frame1.html">Take this link</a>to the first HTML document in the test.
    </body>
    </noframes>
</frameset>
</html>

Frame Layout

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title>frame1</title>
 5 </head>
 6 <body>
 7   <h1 align="center">Frame</h1>
 8   <h1 align="center">1</h1>
 9   <a href="new.html" target="fill_me"><p>在目标框架（框架3）中显示新连接</p></a>
10 </body>
11 </html>

frame1.html

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title>frame2</title>
 5 </head>
 6 <body>
 7   <h1 align="center">Frame</h1>
 8   <h1 align="center">2</h1>
 9 </body>
10 </html>

frame2.html

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title>frame3</title>
 5 </head>
 6 <body>
 7   <h1 align="center">Frame</h1>
 8   <h1 align="center">3</h1>
 9   <p>本框架设置了name属性，可供通过target属性来引用本框架以显示超链接文档</p>
10 </body>
11 </html>

frame3.html

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title>frame4</title>
 5 </head>
 6 <body>
 7   <h1 align="center">Frame</h1>
 8   <h1 align="center">4</h1>
 9 </body>
10 </html>

frame4.html

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title>frame5</title>
 5 </head>
 6 <body>
 7   <h1 align="center">Frame</h1>
 8   <h1 align="center">5</h1>
 9 </body>
10 </html>

frame5.html

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title>frame6</title>
 5 </head>
 6 <body>
 7   <h1 align="center">Frame</h1>
 8   <h1 align="center">6</h1>
 9 </body>
10 </html>

framen6.html

1 <!DOCTYPE html>
2 <html>
3 <head>
4     <title>new</title>
5 </head>
6 <body>
7   <p>frame1中的超链接指向本文档，通过target属性让该文档在frame3中显示。</p>
8 </body>
9 </html>

new.html

通过为frame1设置noresize属性，使得frame1和frame2之间的边框不可调节，即固定可窗口中frame1的宽度。因为frame2没有设置该属性，所以如图中红框所示边框是可调节的。

<frameset rows="60%,*" cols="*,15%,60%">
    <frame src="frame1.html" noresize="noresize">
    <frame src="frame2.html">
    <frame src="frame3.html" name="fill_me">

为frame3指定了name属性，相当于创建一个锚。

<frame src="frame3.html" name="fill_me">

在frame1的超链接中通过target属性可以转到指定的锚。

<a href="new.html" target="fill_me"><p>在目标框架（框架3）中显示新连接</p></a>

对比下图和上图，可以看到，当点击frame1中的超链接时，转向的文档在frame3中显示了出来。

转载于:https://www.cnblogs.com/haidaojiege/p/6655562.html

weixin_30326515

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML超文本标记语言（六）——框架

一、<frameset>和<frame>标签框架的作用：通过使用框架，可以在同一个浏览器窗口中显示不止一个页面。每份HTML文档称为一个框架，并且每个框架都独立于其他框架。框架结构（框架集）标签：<frameset></framenset>定义如何将窗口分割为框架； ...
复制链接

扫一扫