frameset

一个双标签，它定义了一个框架集，它被用来组织多个窗口。每个窗口都是一个独立的html界面。

1、基本语法：

<frameset cols="value，value...">...</frameset>
或者
<frameset rows="value，value...">...</frameset>

前一个是将一个页面分为任意数量的并列子页面，value值一般采用百分比来取值。
前一个是将一个页面分为任意数量的并排子页面，value值一般采用百分比来取值。
rows与cols不能同时使用，否则后者将覆盖掉前者。

2、使用方法：

将其写在HTML代码中，它替代了body标签，也就是说它不能与body同时使用。标签内使用单标签frame来引入其它HTML页面。
eg:

<frameset cols="20%,80%">
    <frame src="left.html" name="leftframe">
        <frame src="news.html" name="rightframe">
</frameset>

frame必须定义的属性：
src：引入页面的地址。
name：表示该框架的名称，属性值可以随便定义，是超链接a标签中target属性的寻找目标。

3.我的应用实例

在这里插入图片描述
这是我的Web前端的一个试验作业

首页 index

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>index</title>
</head>
<frameset rows="20%,70%,10%">
    <frame src="top.html" style="border: 1px solid black;" name="topframe">
        <frame src="middle.html" style="border: 1px solid black;" name="middleframe">
            <frame src="bottom.html" style="border: 1px solid black;" name="bottomframe">
</frameset>
</html>

顶部框架 top

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>top</title>
</head>
<body style="background-image: url('');background-color: #8c8cfc;font-size: 40px;font-weight: bolder; color: white;">
    <div style="height: 100%; text-align: center;padding-right:70%;padding-top: 5%; ">
        网站后台管理系统
    </div>
</body>
</html>

中间层框架 middle

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>middle</title>
</head>
<frameset cols="20%,80%">
    <frame src="left.html" name="leftframe">
        <frame src="news.html" name="rightframe">
</frameset>
</html>

中间左边框架 left

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

<head>
    <meta charset="UTF-8">
    <title>left</title>
</head>
<style>
    a {
        display: block;
        margin-top: 20px;
        font-size: 20px;
    }
</style>
<body>
    <div style="display: block;position: relative;margin: 100px auto;width: 120px;">
        <a href="news.html" target="rightframe">新闻管理</a>
        <a href="news.html" target="rightframe">用户管理</a>
        <a href="http://www.njust.edu.cn" target="rightframe">南京理工大学</a>
        <a href="http://www.baidu.com" target="rightframe">百度</a>
    </div>
</body>
</html>

中间右边框架 right


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

<head>
    <meta charset="UTF-8">
    <title>left</title>
</head>
<style type="text/css">
    td,
    table {
        border: 1px solid #cccccc;
        background-color: #eeeeee;
    }
</style>
<body style="text-align: center;">
    <div style="margin: 50px 20px;" align="center">新闻————览表</div>
    <table align="center">
        <thead>
            <tr>
                <td>序号</td>
                <td>新闻标题</td>
                <td>添加日期</td>
                <td>操作</td>
                <td>发布人</td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>南京理工大学校长来学院视察</td>
                <td>2012-01-22</td>
                <td>修改 删除</td>
                <td>管理员</td>
            </tr>
            <tr>
                <td>2</td>
                <td>学院举办学风建设研讨会</td>
                <td>2012-02-23</td>
                <td>修改 删除</td>
                <td>管理员</td>
            </tr>
            <tr>
                <td>3</td>
                <td>好消息：乐学网站开通了</td>
                <td>2012-03-01</td>
                <td>修改 删除</td>
                <td>管理员</td>
            </tr>
            <tr>
                <td>4</td>
                <td>今天在1205多媒体教室上课</td>
                <td>2012-03-13</td>
                <td>修改 删除</td>
                <td>管理员</td>
            </tr>

        </tbody>
        <tfoot>
            <tr>
                <td>5</td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
        </tfoot>
    </table>
</body>

</html>

底部框架 bottom

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>bottom</title>
</head>

<body style="text-align: center;">
    <div>版权所有&copy;物联网工程4班，354135463</div>
</body>

</html>
# 前端
Logo
2048 AI社区

有“AI”的1024 = 2048，欢迎大家加入2048 AI社区

更多推荐

myaifast-1705 麦芽AI 团队不做的 5 件事：开源边界 / 多模型 / 通用助手

我是麦芽AI 创始人陈墨。2025 年 9 月，我写过一篇《麦芽AI 的 3 个非共识设计决策：为什么我们不做"更聪明的 AI"》（myaifast-1605）——那篇讲了3 个我们"不做的决策"。今天这篇文章，更彻底——直接列出 5 件我们"不做"的事不全面开源（只开源 MCP 桥接层）不做模型切换 UI（不做"ChatGPT / Kimi 一键切"）不做通用 AI 助手梦（不做"全能秘书"）不

avatar 2048 AI社区
cover

传统运维能否被 AI 改写？基于 Intel Berkeley 实验室数据的 DolphinDB MCP 实战

avatar 2048 AI社区

M3 Max 96GB 本地部署 Qwen3.6-35B-A3B：打造 SolidWorks 智能机械设计与企业知识库 AI 工作站

目前已经存在针对 Apple Silicon 优化的 MLX 量化版本，例如 Qwen3.6-35B-A3B-OptiQ-4bit，可以直接使用 MLX 运行，无需将模型转换成 GGUF。它采用 MoE（Mixture of Experts）架构，总参数规模约 35B，但每个 Token 实际激活的参数规模约为 3B，因此非常适合 Apple Silicon 本地推理。该版本针对 Apple Si

avatar 2048 AI社区