HTML框架标签

最新推荐文章于 2026-04-11 09:03:13 发布

原创最新推荐文章于 2026-04-11 09:03:13 发布 · 9k 阅读

121 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#html #框架标签

Web前端专栏收录该内容

29 篇文章

订阅专栏

框架标签：frame 标签
一个frame包含一个html页面
属性：
src：引入包含html

框架集：frameset
当包含两个或两个以上的html页面，称为frameset标签，称为：框架集。
frameset不能和body共存。

frameset中两个属性：
rows：由上到下，横向划分

rows = "20%,*"
<!-- *：通配符（当前横向划分，当前剩余的部分占整个的权重百分比！）-->

clos：由左到右，竖向划分

clos = "15%,*"

构建一个框架，如下图所示：
在这里插入图片描述
代码实现：

header.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>LOGO部分</title>
	</head>
	<body>
		<h1 align="center">教务管理系统</h3>
	</body>
</html>

menu.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>左边菜单页面</title>
	</head>
	<body>
		<ul>
			<!--需要在指定的页面中打开（框架标签frame），target中的属性值必须和frame的name值一样-->
			<li><a href="成绩.html" target="main">成绩管理</a></li>
			<li><a href="#">学籍管理</a></li>
			<li><a href="#">选课管理</a></li>
			<li><a href="#">信息管理</a></li>
		</ul>
	</body>
</html>

成绩.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>主页面</title>
	</head>
	<body>
		<table border="1" align="center" width="100%" height="50px">
			<caption>班级平均成绩</caption>
			<tr align="center">
				<th>姓名</th>
				<th>班级</th>
				<th>成绩</th>
			</tr>
			<tr align="center">
				<td>A</td>
				<td>软工1</td>
				<td>85</td>
			</tr>
			<tr align="center">
				<td>B</td>
				<td>软工2</td>
				<td>76</td>
			</tr>
			<tr align="center">
				<td>C</td>
				<td>软工3</td>
				<td>91</td>
			</tr>
		</table>
	</body>
</html>

main.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>框架标签</title>
	</head>
	<body>
		<center><font color="darkgrey">欢迎进入教务管理系统</font></center>
	</body>
</html>

test.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>教务管理系统</title>
	</head>
	
	<frameset rows="20%,*" >
		<frame src="header.html"/>
		<frameset cols="20%,*">
			<frame src="menu.html"/>
			<frame src="main.html" name="main" />
		</frameset>
	</frameset>
	
	<body>
	</body>
</html>