首页 >web前端 >html教程 >HTML 中的框架标签

HTML 中的框架标签

王林原创: 2024-09-04 16:32:031162浏览

HTML 框架标签用于以部分的形式在单个网页上显示多个站点。该标签允许设计网页，以便可以将具有不同内容的多个网页组合起来并单独显示在单个网页上。这是通过将单个网页划分为不同的部分（可以称为框架）来实现的。各个帧可以单独加载。 Frame标签与frameset标签一起使用，其中frameset标签可以被视为容器，其中多个frame标签将代表多个站点。

语法：

框架标签的基本语法如下，

<frame src = "URL">

src 属性指定文件的来源。 <框架> tag还支持一些其他属性，但src是主要属性。

如前所述，标签与

一起使用标签。框架集可以被视为多个框架的集合，其中每个框架将代表要在同一页面上加载的单个站点。框架标签将与框架集标签一起使用，如下所示，

<frameset>
<frame src = " ">
<frame src = " ">
.
.
<frame src = " ">
</frameset>

请注意，frameset 标签有结束标签，但frame 标签没有。

HTML 中的框架标签示例

html 中框架标签的示例如下：

示例 #1 – 水平对齐框架

共有三个文件frame1、frame2和main。

Frame1.html

代码：

<!DOCTYPE html>
<html>
<head>
<title> Frame tag Example </title>
<style>
body {
text-align: center ;
background-color: rgb(120, 120, 120, 0.30 ) ;
}
.results {
border : green 1px solid;
background-color : aliceblue;
text-align : left;
padding-left : 20px;
height : 300px;
width : 95%;
}
</style>
</head
<body>
<div class = "results">
<h2> frame tag in HTML </h2>
<h1> Frame 1 </h1>
</div>
</body>
</html>

Frame2.html

代码：

<!DOCTYPE html>
<html>
<head>
<title> frame tag Example </title>
<style>
body {
text-align: center ;
background-color: rgb(120, 120, 120, 0.30 ) ;
}
.results {
border : green 1px solid;
background-color : aliceblue;
text-align : left;
padding-left : 20px;
height : 300px;
width : 95%;
}
</style>
</head
<body>
<div class = "results">
<h2> frame tag in HTML </h2>
<h1> Frame 2 </h1>
</div>
</body>
</html>

Main.html

代码：

<!DOCTYPE html>
<html>
<head>
<meta name = "viewport" content=
"width = device-width, initial-scale = 1.0">
<title>
frame tag in HTML
</title>
<frameset cols = "50%, 50%" >
<frame src = "frame1.html" >
<frame src = "frame2.html" >
</frameset>
</head>
<body>
</body>
</html>

输出：这里，我们使用 cols 属性将它们指定为一列，并且每帧的宽度已设置为 50%。

HTML 中的框架标签

示例 #2 – 垂直对齐框架

有四个文件frame1、frame2、frame3和main。

Frame1.html

代码：

<!DOCTYPE html>
<html>
<head>
<title> Frame tag Example </title>
<style>
body {
text-align: center ;
background-color: rgb(120, 120, 120, 0.30 ) ;
}
.results {
border : green 1px solid;
background-color : aliceblue;
text-align : left;
padding-left : 20px;
height : 300px;
width : 95%;
}
</style>
</head
<body>
<div class = "results">
<h2> frame tag in HTML </h2>
<h1> Frame 1 </h1>
</div>
</body>
</html>

Frame2.html

代码：

<!DOCTYPE html>
<html>
<head>
<title> frame tag Example </title>
<style>
body {
text-align: center ;
background-color: rgb(120, 120, 120, 0.30 ) ;
}
.results {
border : green 1px solid;
background-color : aliceblue;
text-align : left;
padding-left : 20px;
height : 300px;
width : 95%;
}
</style>
</head
<body>
<div class = "results">
<h2> frame tag in HTML </h2>
<h1> Frame 2 </h1>
</div>
</body>
</html>

Frame3.html

代码：

<!DOCTYPE html>
<html>
<head>
<title> Frame tag Example </title>
<style>
body {
text-align: center ;
background-color: rgb(120, 120, 120, 0.30 ) ;
}
.results {
border : green 1px solid;
background-color : aliceblue;
text-align : left;
padding-left : 20px;
height : 300px;
width : 95%;
}
</style>
</head
<body>
<div class = "results">
<h2> frame tag in HTML </h2>
<h1> Frame 3 </h1>
</div>
</body>
</html>

Main.html

代码：

<!DOCTYPE html>
<html>
<head>
<meta name = "viewport" content=
"width = device-width, initial-scale = 1.0">
<title>
frame tag in HTML
</title>
<frameset rows = "30%, 30%, 30%" >
<frame src = "frame1.html" >
<frame src = "frame2.html" >
<frame src = "frame3.html" >
</frameset>
</head>
<body>
</body>
</html>

输出：这里，我们在frameset标签上使用了cols属性来水平划分框架，并且高度以百分比表示。

HTML 中的框架标签

示例 #3 – 使用链接导航不同的框架

对于此示例，三个文件：frame1.html、frame2.html 和frame3.html 是相同的。

我们将使用带有框架标签的名称属性。

Main.html

代码：

<!DOCTYPE html>
<html>
<head>
<meta name = "viewport" content=
"width = device-width, initial-scale = 1.0">
<title>
frame tag in HTML
</title>
<frameset cols = "30%, * " >
<frame src = "menu.html" name = "menu" >
<frame name = "frame" >
</frameset>
</head>
<body>
</body>
</html>

menu.html

代码：

<!DOCTYPE html>
<html>
<head>
<title> Frame tag Example </title>
<style>
body {
text-align: center ;
background-color: rgb(120, 120, 120, 0.30 ) ;
}
.results {
border : green 1px solid;
background-color : aliceblue;
text-align : center;
height : 300px;
width : 95%;
}
</style>
</head
<body>
<div class = "results">
<h2> Menu </h2>
<a href = "frame1.html" target = "frame"> Frame 1 </a> </br> </br>
<a href = "frame2.html" target = "frame"> Frame 2 </a> </br> </br>
<a href = "frame3.html" target = "frame"> Frame 3 </a>
</div>
</body>
</html>

这里在frameset标签中，我们将两个框架划分为第一框架的30%宽度和第二框架的剩余全部宽度。第一帧将以超链接的形式列出菜单。对于第二个框架，我们为其分配了一个名称，并且在 menu.html 中，我们将目标设置为每个链接的框架名称。所以，这个链接将指向框架，内容将显示在同一框架上。

输出：

HTML 中的框架标签

注意： HTML5 不支持标签，而是使用

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

html5 html for using Attribute Collection this display column iframe

声明：

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

上一篇：HTML Umlaute下一篇：tfoot in HTML

相关文章

查看更多