2、 框架实例
注意：frameset不能和body标签共存
<frameset>元素是用于创建框架页面的，它允许在一个浏览器窗口中显示多个HTML页面。然而，<frameset>是一种较旧的方式来构建网页，它不符合现代Web标准（比如HTML5）。HTML5不推荐使用<frameset>，因为它有许多限制，并且可能被未来的浏览器弃用。
2.1、垂直框架：
- 尺寸可调整（鼠标放置在相交处）
- cols 标签
<html>
<!--垂直框架cols-->
<frameset cols="25%,50%,25%">
<frame src="/example/html/frame_a.html">
<frame src="/example/html/frame_b.html">
<frame src="/example/html/frame_c.html">
</frameset>
</html>
运行效果：
2.2、水平框架：
- 尺寸可调整（鼠标放置在相交处）
- rows 标签
<html>
<!--水平框架rows -->
<frameset rows="25%,50%,25%">
<frame src="/example/html/frame_a.html">
<frame src="/example/html/frame_b.html">
<frame src="/example/html/frame_c.html">
<!--设置不支持提示noframes -->
<noframes>
<body>您的浏览器不支持该框架</body>
</noframes>
</frameset>
</html>
运行效果：
2.3、混合框架的使用：
- 尺寸可调整（鼠标放置在相交处）
<html>
<!--混合框架的使用 rows+cols-->
<frameset rows="50%,50%">
<frame src="/example/html/frame_a.html">
<frameset cols="25%,75%">
<frame src="/example/html/frame_b.html">
<frame src="/example/html/frame_c.html">
</frameset>
</frameset>
</html>
运行效果：
2.4设置尺寸不可拖动修改
- noresize="noresize"实现尺寸不可拖动修改
<html>
<!--混合框架之设置尺寸不可拖动改变 设置frame_a的尺寸不能改变-->
<frameset cols="25%,25%,50%">
<frame src="/example/html/frame_a.html" noresize="noresize">
<frame src="/example/html/frame_b.html" >
<frame src="/example/html/frame_c.html" >
</frameset>
</html>
2.5 设置尺寸自适应
- 星号标签实现自适应
<html>
<!--混合框架之设置尺寸不可拖动改变 设置frame_a的尺寸不能改变-->
<frameset cols="25%,*,*">
<frame src="/example/html/frame_a.html" >
<frame src="/example/html/frame_b.html" >
<frame src="/example/html/frame_c.html" >
</frameset>
</html>
运行效果：
A占25%，B和C平分剩余空间
2.6、iframe内联框架的使用（用于网页中显示网页）
标签是一个内联框架，即用来在当前 HTML 页面中嵌入另一个文档的，且所有主流浏览器都支持iframe标签。<iframe src="URL"></iframe> 其中URL可为文件可为链接
（1）URL=文本
创建iframe_content.html文件
<html>
<body>
<p>蒹葭苍苍，白露为霜。所谓伊人，在水一方。</p>
<p>溯洄从之，道阻且长。溯游从之，宛在水中央。</p>
<p>蒹葭萋萋，白露未晞。所谓伊人，在水之湄。</p>
<p>溯洄从之，道阻且跻。溯游从之，宛在水中坻。</p>
</body>
</html>
创建iframe.html文件，实现效果
<html>
<!--frameborder=0则为不需要边框 scrolling="no"不滚动 auto、yes-->
<iframe src="iframe_content.html" width="300px" height="300px"></iframe>
</html>
运行效果：
（2）URL=链接
<html>
<!--frameborder=0则为不需要边框 scrolling="no"不滚动 auto、yes-->
<iframe src="https://www.baidu.com" width="500px" height="300px"></iframe>
</html>
运行效果：
（3） URL=链接 实现内联效果 （点击修改iframe中的内容）
<html>
<!--frameborder=0则为不需要边框 scrolling="no"不滚动 auto、yes-->
<iframe src="frame_a.html" name="framea" width="300px" height="300px"></iframe>
<p><a href="https://www.baidu.com" target="framea">百度</a></p>
</html>
运行效果：
原始效果：
点击百度：
2.7、锚的使用(设置页面默认展示位置)+页面跳转
【HTML】使用框架导航跳转到指定的节
frame_list.html
<html>
<body>
<h1>Chapter 1</h1>
<p>这是一句话</p>
<h1>Chapter 2</h1>
<p>这是一句话</p>
<h1>Chapter 3</h1>
<p>这是一句话</p>
<h1>Chapter 4</h1>
<p>这是一句话</p>
<h1>Chapter 5</h1>
<p>这是一句话</p>
<h1>Chapter 6</h1>
<p>这是一句话</p>
<h1>Chapter 7</h1>
<p>这是一句话</p>
<h1>Chapter 8</h1>
<p>这是一句话</p>
<h1>Chapter 9</h1>
<p>这是一句话</p>
<h1 ><a name="C10">Chapter 10</a></h1>
<p>这是一句话</p>
<h1>Chapter 11</h1>
<p>这是一句话</p>
<h1>Chapter 12</h1>
<p>这是一句话</p>
<h1>Chapter 13</h1>
<p>这是一句话</p>
<h1>Chapter 14</h1>
<p>这是一句话</p>
<h1>Chapter 15</h1>
<p>这是一句话</p>
<h1>Chapter 16</h1>
<p>这是一句话</p>
<h1>Chapter 17</h1>
<p>这是一句话</p>
</body>
</html>
frame_miao.html
<html>
<body>
<a href="frame_list.html" target="showframe">没有锚的链接</a>
<br >
<a href="frame_list.html#C10" target="showframe">带锚的链接</a>
</body>
</html>
frame_link.html
- 注意此处设置name
<html>
<frameset cols="200,*">
<frame src="frame_miao.html" >
<frame src="frame_list.html" name="showframe">
</frameset>
</html>
运行效果：
（1）没有带锚的
（2）带锚的
2.7.2 html实现简单导航栏
frame_content.html
<meta charset="utf-8"/>不设置的话，title文字在浏览器上显示乱码
<html>
<head>
<meta charset="utf-8"/>
<title>导航栏之导航部分</title>
<body>
<a href="frame_a.html" target="content">FrameA</a>
<br >
<a href="frame_b.html" target="content">FrameB</a>
<br >
<a href="frame_c.html" target="content">FrameC</a>
<br >
</head>
</body>
</html>
frame_a.html
<html>
<body bgcolor="yellow">
<h1>FrameA</h1>
</body>
</html>
然后frame_navigation bar.html
<html>
<head>
<title>导航栏Demo</title>
<frameset cols="25%,*">
<frame src="frame_content.html"></frame>
<frame src="frame_a.html" name="content"> </frame>
</frameset>
</html>
运行frame_navigation bar.html效果：
点击左侧FrameA 右侧变为frame_a.html里面的内容
点击左侧FrameB 右侧变为frame_b.html里面的内容
点击左侧FrameC 右侧变为frame_c.html里面的内容
- target的效果即为：
将name对应的文件内容修改为target对应的内容
