如何在 HTML 中创建框架

17 Mar 2025 | 6 分钟阅读

本文将解释如何在 HTML 中创建框架。首先，让我们了解 HTML 框架。

HTML 框架

HTML 框架用于将网页浏览器窗口分割成多个部分。这些部分或区域相互独立，并且可以单独加载。

HTML 框架显示多个视图的文档。例如，一个框架可以显示导航栏，另一个框架可以显示主要内容等。

HTML 表格由行和列组成。同样，网页浏览器窗口也可以被分割成框架来创建多个区域。

网页浏览器窗口上的一组框架称为框架集。

创建框架

我们可以使用 <frameset> 标签和 <frame> 标签在 HTML 中创建框架。<frameset> 标签用于替代 <body> 标签来创建网页框架。如果我们同时使用 <body> 标签和 <frameset> 标签，代码将无法工作。

<frameset> 标签和 <frame> 标签

<frameset> 标签用于将窗口分割成框架。它包含一个或多个使用 <frame> 标签定义的框架。

语法

<frameset>
    <frame name="frame1" src="url"/>
    <frame name="frame2 src="url"/>
    .
    .
</frameset>

<frameset> 是开始标签，</frameset> 是结束标签。<frame> 标签是自闭合标签。

注意：<frameset> 标签和 <frame> 标签不推荐使用，因为它们在 HTML5 中不受支持。

我们将在 <frameset> 和 <frame> 标签中使用各种属性，下面将一一讨论。

<frameset> 标签的属性

属性	描述
Cols (列)	cols 属性用于定义框架集中存在的列数以及框架集中每列的大小。它创建垂直框架，cols 属性的值可以是像素、百分比等。示例：<frameset cols = "20%, 50%, 30%"> 上面的示例在网页浏览器中创建了三个列框架。对于两个框架，将提供两个值。对于三个框架，将提供三个值，依此类推。
行	rows 属性用于定义框架集中存在的行数以及框架集中每行的大小。它创建水平框架，rows 属性的值可以是像素、百分比等。示例：<frameset cols = "25%, 75%"> 上面的示例在网页浏览器中创建了两个行框架。
Border (边框)	width 属性用于定义每个框架边框的宽度。
frameborder (框架边框)	frameborder 属性定义是否在框架之间显示 3-D 边框。它只有两个值：“0”或“1”。值为“0”表示无框架边框，值为“1”表示有 3-D 框架边框。
framespacing (框架间距)	framespacing 属性定义框架之间的间距。它接受一个整数值。

<frame> 标签的属性

属性	描述
name	"name" 属性用于为框架命名。
Src (源)	"src" 属性用于提供框架的 URL。
marginwidth (页边距宽度)	"marginwidth" 属性用于定义框架边框的左侧和右侧与框架内容之间的空间。
marginheight (页边距高度)	"marginheight" 属性用于定义框架顶部和底部边框与框架内容之间的空间。
frameborder (框架边框)	"frameborder" 属性定义是否显示框架边框。它只有两个值：“0”或“1”。值为“0”表示“是”，值为“1”表示“否”。
noresize	"noresize" 属性用于阻止用户更改框架的大小。示例：noresize = "noresize"
longdesc (长描述)	"longdesc" 属性用于提供一个指向包含长描述的另一个页面的链接。
scrolling (滚动条)	"scrolling" 属性用于控制框架上可见滚动条的外观。

构建 HTML 框架

首先，我们将创建一个名为 "navbar.html" 的文件。
代码

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Navbar File</title>
    <style>
        body {
            background-color: darkkhaki;
        }
        nav {
            color: black;
            padding: 5px;
        }
    </style>
</head>
<body>
    <nav>
        <ul>
            <li>
                <a href="https://www.google.co.in/">Google</a>
            </li>
            <li>
                <a href="https://www.youtube.com/">YouTube</a>
            </li>
            <li>
                <a href="https://twitter.com/">Twitter</a>
            </li>
            <li>
                <a href="https://www.instagram.com/">Instagram</a>
            </li>
            <li>
                <a href="https://in.pinterest.com/">Pinterest</a>
            </li>
        </ul>
    </nav>
</body>
</html>

输出

在下面的输出中可以看到一个导航栏。

我们需要创建一个名为 "main.html" 的文件，其中包含主要内容。

代码

<!DOCTYPE html>
<html lang="en">.g
<head>
    <title>Main Content File</title>
    <style>
        body {
            background-color: rgb(253, 248, 180);
            color: red;
            text-align: center;
            padding: 20px;
            font-weight: bold;
            font-size: 36px;
        }
    </style>
</head>
<body>
    <div>
        Main Content...
    </div>
</body>
</html>

输出

在下面的输出中可以看到主要内容。

我们将创建一个页脚文件，名为 "foot.html"。

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Footer File</title>
    <style>
        body {
            background-color: rgb(119, 87, 45);
            color: white;
            text-align: center;
            font-weight: bold;
            margin-top: 36px;
            font-size: 28px;
        }
    </style>
</head>
<body>
    FOOTER
</body>
</html>

输出

我们已经创建了一个页脚文件，可以在下面的输出中看到。

我们将创建一个框架集，并添加我们已创建的三个文件："navbar.html"、"main.html" 和 "foot.html"。

我们将使用 "cols" 属性以列的形式创建框架。

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Frames in columns</title>
</head>
<frameset cols="30%, 40%, 30%">
    <frame name="navbar" src="navbar.html">
    <frame name="main-content" src="main.html">
    <frame name="foot" src="foot.html">
</frameset>
</html>

输出

在输出中，我们可以在单个网页上看到三个列式框架。

我们将使用 "rows" 属性以行的形式创建框架。

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Frames in rows</title>
</head>
<frameset rows="=20%, 70%, 10%">
    <frame name="navbar" src="navbar.html">
    <frame name="main-content" src="main.html">
    <frame name="foot" src="foot.html">
</frameset>
</html>

输出

下面是输出，我们可以清楚地看到单个网页上以行排列的三个名为 "navbar.html"、"main.html" 和 "foot.html" 的框架。

嵌套框架集

当一个框架集定义在另一个框架集中时，称为嵌套框架集。

在本演示中，我们将在 HTML 中创建嵌套框架集。

代码

<!DOCTYPE html> 
<html lang="en">
<head>
	<title>Nested Framesets in HTML</title> 
</head> 

<frameset rows="20%,*,*"> 

	<frameset cols="100%"> 

        <frame name="navbar" src="navbar.html">

	</frameset>

	<frameset cols="*, *"> 
		<frame name="frame4" src="frame4.html"> 
		<frame name="frame5" src="frame5.html">
	</frameset> 

    <frame name="foot" src="foot.html">
</frameset> 

</html>

输出

我们可以在单个网页上看到嵌套框架集。

框架的优点

使用 HTML 框架的主要好处是它允许用户在单个网页上查看多个文档。
我们可以使一个框架保持静态，而改变其他框架。
我们可以在单个框架集中加载来自不同服务器的网页。
它减少了下载时间，因为不需要在每个页面上加载图像。
它减少了服务器负载。
我们可以利用框架创建动态布局。
我们可以将顶部框架用作标题。

框架的缺点

当单个网页上有两个以上的框架时，导航框架变得困难。
某些旧浏览器不支持框架，因此内容使用 <noframes> HTML 标签单独放置。
打印所有框架的内容很困难。
使用框架时，搜索引擎优化变得困难，因为搜索引擎难以对包含框架的网页进行排名。
如果使用过多的框架，服务器加载网页的时间会更长。
使用许多框架时，系统屏幕上的空间会减少。

浏览器支持

以下是支持 <frameset> 和 <frame> 标签的浏览器：

谷歌浏览器
火狐
Safari
Microsoft Edge
Opera

结论

我们已经理解了如何在 HTML 中创建框架。我们可以使用 <frameset> 标签和 <frame> 标签来创建框架。我们可以在 HTML 中创建嵌套框架集。

下一主题HTML 压缩器

如何在 HTML 中创建框架

HTML 框架

创建框架

<frameset> 标签和 <frame> 标签

注意：<frameset> 标签和 <frame> 标签不推荐使用，因为它们在 HTML5 中不受支持。

<frameset> 标签的属性

<frame> 标签的属性

构建 HTML 框架

嵌套框架集

框架的优点

框架的缺点

浏览器支持

结论

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

HTML 教程

HTML 属性

HTML 标签列表

HTML5 高级

HTML API

HTML 颜色名称

HTML 杂项

选择题

面试题

如何在 HTML 中创建框架

HTML 框架

创建框架

<frameset> 标签和 <frame> 标签

注意：<frameset> 标签和 <frame> 标签不推荐使用，因为它们在 HTML5 中不受支持。

<frameset> 标签的属性

<frame> 标签的属性

构建 HTML 框架

嵌套框架集

框架的优点

框架的缺点

浏览器支持

结论

相关帖子

如何运行 HTML 程序

将 HTML 转换为 PDF

在 HTML 中添加制表符

HTML Android 编译器

HTML blink 标签

HTML 中的 Div 是什么意思

HTML 页面结构

HTML 动画

HTML 标签由哪种括号包围

HTML 中的电子邮件验证

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器