预计效果图
代码展示
话不多说,先上代码,完整代码可在我的GitHub中找到,链接在此
frame_sets.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用框架实例</title>
</head>
<frameset rows="25%,75%">
<frame name="a" src="./top.html">
<frameset cols="25%,75%">
<frame name="b" src="./left.html">
<frame name="c" id="c" src="./right1.html">
</frameset>
</frameset>
</html>
left.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>第2章 HTML语言</h1>
<br>
<p>
<a href="./right1.html" target="c" style="font-size: x-large">2.1HTML基础知识</a>
</p>
<br>
<p>
<a href="./right2.html" target="c" style="font-size: x-large">2.2HTML语言入门</a>
</p>
</body>
</html>
关键代码解释
frameset 元素可定义一个框架集。它被用来组织多个窗口(框架)。每个框架存有独立的文档。在其最简单的应用中,frameset 元素仅仅会规定在框架集中存在多少列或多少行。您必须使用 cols 或 rows 属性。
注释:如果您希望验证某个包含框架的页面,请确保 DTD 被设置为 “Frameset DTD”
重要事项:您不能与 <frameset></frameset>
标签一起使用 <body></body>
标签。不过,如果您需要为不支持框架的浏览器添加一个 <noframes>
标签,请务必将此标签放置在 <body></body>
标签中!
frameset 示例
代码
<html>
<frameset rows="50%,50%">
<frame src="https://www.w3school.com.cn/example/html/frame_a.html">
<frameset cols="25%,75%">
<frame src="https://www.w3school.com.cn/example/html/frame_b.html">
<frame src="https://www.w3school.com.cn/example/html/frame_c.html">
</frameset>
</frameset>
</html>
代码解释
<frameset rows="50%,50%">
将整个网页上下平均分成两份
<frame src="https://www.w3school.com.cn/example/html/frame_a.html">
将该网页的上半部分置为网页https://www.w3school.com.cn/example/html/frame_a.html
<frameset cols="25%,75%">
<frame src="https://www.w3school.com.cn/example/html/frame_b.html">
<frame src="https://www.w3school.com.cn/example/html/frame_c.html">
</frameset>
将该网页的下半部分分成两部分,其中一份占1/4,一份占3/4
并将1/4的那一份置为网页https://www.w3school.com.cn/example/html/frame_b.html
将3/4的那一份置为网页https://www.w3school.com.cn/example/html/frame_c.html
示例结果展示
结果展示
当点击2.1HTML基础知识时,出现下图的页面
当点击2.2HTML语言入门时,出现下图的页面