预计效果图

在这里插入图片描述

代码展示

话不多说，先上代码，完整代码可在我的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