<frameset>&<frame>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<!-- <frameset>和<body>只能二选一 -->
<!-- 框架的集合用<frameset>表示，然后在<frameset>集合里放入一个一个的框架<frame> -->
<!-- rows：水平分割 cols：垂直分割 -->
<!-- 1、绝对值写法：rows="200,*" 其中*代表剩余的。
        这里其实包含了两个框架：上面的框架占200个像素，下面的框架占剩下的部分。
        2、相对值写法：rows="30%,*" 其中*代表剩余的。
        这里其实包含了两个框架：上面的框架占30%，下面的框架占70%。 -->

<frameset rows="20%,*">

    <frame scrolling="no" src="./top.html">
    </frame>

    <frameset cols="40%,*" frameborder="0">
    <!-- frame为一个框架，会显示一个页面 -->
    <!-- scrolling="no"：是否需要滚动条。默认值是true。noresize：不可以改变框架大小。 -->
        <frame noresize src="./左下角.html"></frame>
        <!-- 可以给框架的name属性赋值来实现超链接 -->
        <frame name="右下角" src="./右下角.html"></frame>

    </frameset>

</frameset>

</html>
Second.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <a href="https://www.baidu.com" target="右下角">Link</a>
</body>
</html>
top.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>这里是左下角的框架</p>
</body>
</html>
左下.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
     <p>这里是右下角的页面，点击最上面的链接，这个页面会变成百度</p>
</body>
</html>
右下角.html