社区
学习
工具库
AI工具
休闲
搜索
简体中文
首页 > web前端 > html教程 > HTML 中的框架标签

HTML 中的框架标签

王林
发布： 2024-09-04 16:32:03
原创
1202 人浏览过

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中文网其他相关文章！

相关标签：
html html5 HTML Tutorial HTML Properties HTML tags
上一篇：HTML 变音符号 下一篇：HTML 中的 tfoot
本站声明
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
作者最新文章
最新问题
输入<html><>后是怎么变成<html></html>的
来自于 1970-01-01 08:00:00
0
0
0
angular.js - 有谁知道吗用ng-bind-html绑定html。但是html却被转义了
来自于 1970-01-01 08:00:00
0
0
0
HTML与HTML5的区别
来自于 1970-01-01 08:00:00
0
0
0
HTML总结
来自于 1970-01-01 08:00:00
0
0
0
HTML总结
来自于 1970-01-01 08:00:00
0
0
0
相关专题
更多>
热门推荐
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板