demo2.html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="./styles.css"/>
<script type="text/javascript" src=""></script>
<title>框架标签</title>
</head>
<!-- frameset与body不共存-->
<!--
框架标签
frameset:
属性： cols:按列划分
rows:按行划分
划分格式 rows="120,*" *代表的是剩余的
frame:
属性： name:名称，方便target根据name的值进行定位
src：加载页面的路径
-->
<frameset rows="120,*">
<frame src="top.html"/>
<frameset columns="120,*">
<frame src="left.html"/>
<frame name="right" src="right.html"/>
</frameset>
</frameset>
<!--
其他标签：
<meta>
<link>
<link rel="stylesheet" type="text/css" href="../styles.css"/>
除了href都是固定的
href:引入css文件的地址
<script>
<script type="text/javascript" src=""></script>
src:js的文件地址
特殊字符：
> 大于号
< 小于号
© 版权符号
® 注册符号
-->
</html>
menu1.html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>menu1</title>
</head>
<body>
menu1
</body>
</html>
menu2.html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>menu2</title>
</head>
<body>
menu2
</body>
</html>
menu3.html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>menu3</title>
</head>
<body>
menu3
</body>
</html>
top.html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>top</title>
</head>
<body>
这里是个top
</body>
</html>
left.html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>left</title>
</head>
<body>
<a href="menu1.html" target="right">menu1</a>
<a href="menu2.html" target="right">menu2</a>
<a href="menu3.html" target="right">menu3</a>
</body>
</html>
right.html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>right</title>
</head>
<body>
这里是个right
</body>
</html>