目录
语法
frameset标签的属性
实现 HTML 框架集标签的示例
示例#3
结论
首页 web前端 html教程 HTML 框架集标签

HTML 框架集标签

Sep 04, 2024 pm 04:30 PM
html html5 HTML Tutorial HTML Properties HTML tags

HTML 中的标签组合了多个框架并将它们显示为单个网页。该文档将包含框架集中包含的所有框架。框架只不过类似于单个窗口或网站。框架集标签允许我们形成多列或多行,并在它们下面包含框架。此功能在 HTML 5 之前就可用,对于通过将各种文档组合在一起来一次显示它们非常有用。每个框架都可以包含其内容;通常,这些是不同的网页文件,例如 HTML 或图像。

语法

这里的起始标签是

;并以结束标记作为 结束。 <框架集>标签可以包含一个或多个多帧标签。每个帧标签都以 开头。标签,属性名称为“src”,我们将在其中传递框架内容。如前所述,此内容可以是任何类似于 Web 文件的内容,例如 HTML 或传递图像。
<frameset cols / rows = ", , , " >
<frame src = "source file name. . . " >
. . . . . .
. . . . . .
<frame src = "source file name. . . " >
</frameset>
登录后复制

这里,我们有一个包含属性 cols 或 rows 的起始标签框架集。通常,这两个属性将与框架集标签一起使用,因为框架集标签用于组合多个框架。这些标签只不过是允许形成行或列来定位各种框架。起始标签后面跟着一个简单的帧标签。要在框架中显示文件,请在框架标记中使用“src”属性并将文件名作为其值传递。我们已经证明,单个帧可以使用点包含多个帧。最后,通过关闭标签

来关闭框架集标签。

frameset标签的属性

以下是框架集标签支持的属性列表:

1。 cols: 该属性用于定位内部框架。 cols 属性将框架集分成多列,垂直显示框架。此属性还允许设置框架集中每列的宽度。我们可以通过将值传递给该属性来为每个帧设置不同的值。该值可以以百分比、像素或相对长度的形式传递。该属性的默认值为 100%。

2。 rows: 该属性也类似于 cols 属性。 rows 属性会将框架集分成多行,框架将一一水平显示。我们可以通过类似于cols属性的值来设置每一帧的高度。通过同时使用行和列,可以实现预期的结果。该属性的默认值也是 100%。

3。 border: 此属性在框架集标签上使用,用于定义框架集中每个框架的宽度。

4。框架间距: 框架集标签使用“框架间距”属性来建立其中框架之间的间隙。

实现 HTML 框架集标签的示例

下面给出的是 HTML 框架集标签的示例:

示例#1

它包含多个 Html 文件,因为我们在一个父窗口中使用不同的文件作为框架。

代码:

主文件:

<!DOCTYPE html>
<html>
<head>
<title> frameset tag in HTML </title>
<style>
</style>
</head>
<frameset>
<frame src = "frame1.html" >
</frameset>
</html>
登录后复制

我们有一个名为frame 1 的源文件。

frame1.html:

<!DOCTYPE html>
<html>
<head>
<title> Frameset Example </title>
<style>
body {
text-align: center ;
background-color: rgb(120, 120, 120, 0.15) ;
}
</style>
</head>
<body>
<h2> Example of Frameset tag </h2>
<h1> Frame 1 </h1>
</body>
</html>
登录后复制

输出:

由于我们只有一个文件作为一个框架包含在内,因此页面将显示整个frame.html的内容。框架的宽度和高度默认为100%;这就是为什么单个框架会占据所有区域。

HTML 框架集标签

示例#2

让我们在示例中再添加一个框架,并使用 cols 属性按列划分它并以百分比形式传递值。

代码

frame2.html:

<!DOCTYPE html>
<html>
<head>
<title> Frameset Example </title>
<style>
body {
text-align: center ;
background-color: rgb(120, 120, 120, 0.30 ) ;
}
</style>
</head
<body>
<h2> Hello World..! </h2>
<h1> Frame 2 </h1>
</body>
</html>
登录后复制

主文件:

<!DOCTYPE html>
<html>
<head>
<title> frameset tag in HTML </title>
<style>
</style>
</head>
<frameset cols = "40% , 60 %" >
<frame src = "frame1.html" >
<frame src = "frame2.html" >
</frameset>
</html>
登录后复制

输出:

在这里,我们传递了两个帧,并使用 cols 属性将它们分开,传递的值分别为 40% 和 60%。使第一帧的宽度为 40%,第二帧的宽度为 60%。

HTML 框架集标签

示例#3

让我们使用 rows 属性水平划分相同的帧。我们将修改相同的最后一个示例。不同之处在于 rows 属性将取代 cols 属性。 rows 属性也采用与 cols 属性类似的值。我们可以根据帧数传递多个值。

代码

主文件:

<!DOCTYPE html>
<html>
<head>
<title> frameset tag in HTML </title>
<style>
</style>
</head>
<frameset rows = "50% , 50%" >
<frame src = "frame1.html" >
<frame src = "frame2.html" >
</frameset>
</html>
登录后复制

输出:

这里输出将是两个水平框架,高度相同为 50%。请注意,此高度将对应于实际的浏览器窗口。

HTML 框架集标签

结论

我们已经了解了 HTML 中的框架集标签、其用途以及如何使用它。该标签旨在在一个显示窗口上合并和展示多个框架。我们还可以使用可用的属性定义框架的位置和大小。该标签自 HTML 5 起已被弃用。

以上是HTML 框架集标签的详细内容。更多信息请关注PHP中文网其他相关文章!

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

热门话题

Java教程
1657
14
CakePHP 教程
1415
52
Laravel 教程
1309
25
PHP教程
1257
29
C# 教程
1229
24
HTML 中的表格边框 HTML 中的表格边框 Sep 04, 2024 pm 04:49 PM

HTML 表格边框指南。在这里,我们以 HTML 中的表格边框为例,讨论定义表格边框的多种方法。

HTML 中的嵌套表 HTML 中的嵌套表 Sep 04, 2024 pm 04:49 PM

这是 HTML 中嵌套表的指南。这里我们讨论如何在表中创建表以及相应的示例。

HTML 左边距 HTML 左边距 Sep 04, 2024 pm 04:48 PM

HTML 左边距指南。在这里,我们讨论 HTML margin-left 的简要概述及其示例及其代码实现。

HTML 表格布局 HTML 表格布局 Sep 04, 2024 pm 04:54 PM

HTML 表格布局指南。在这里,我们详细讨论 HTML 表格布局的值以及示例和输出。

HTML 输入占位符 HTML 输入占位符 Sep 04, 2024 pm 04:54 PM

HTML 输入占位符指南。在这里,我们讨论 HTML 输入占位符的示例以及代码和输出。

HTML 有序列表 HTML 有序列表 Sep 04, 2024 pm 04:43 PM

HTML 有序列表指南。在这里我们还分别讨论了 HTML 有序列表和类型的介绍以及它们的示例

HTML onclick 按钮 HTML onclick 按钮 Sep 04, 2024 pm 04:49 PM

HTML onclick 按钮指南。这里我们分别讨论它们的介绍、工作原理、示例以及各个事件中的onclick事件。

您如何在PHP中解析和处理HTML/XML? 您如何在PHP中解析和处理HTML/XML? Feb 07, 2025 am 11:57 AM

本教程演示了如何使用PHP有效地处理XML文档。 XML(可扩展的标记语言)是一种用于人类可读性和机器解析的多功能文本标记语言。它通常用于数据存储

See all articles