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>
来源: https://www.2cto.com/kf/201804/740282.html