HTML 中的框架（Frame）主要用于将浏览器窗口分割成多个独立的子窗口，每个子窗口可以加载独立的 HTML 文档，不过目前它已经被主流标准淘汰，更推荐使用现代替代方案。
HTML 框架效果就像下图：
上图中，在 HTML 文档中定义了3个子窗口，看上去想不想传统的后端管理系统，左边方功能树，右边上面放功能区，底部加载版本信息。
注意：传统 HTML 框架已经被淘汰，了解以下就可以了，不必深入了解
HTML 的框架主要依赖 <frameset>、<frame>、<iframe> 三个标签，其中 <frameset> 和 <frame> 已被 HTML5 废弃，只有 <iframe> 仍在使用且有明确的适用场景。
用于分割浏览器窗口，替代了 HTML 中的 <body> 标签（使用 <frameset> 的页面不能有 <body> 标签），常用属性：
rows：按垂直方向分割窗口，值可以是像素、百分比、*（剩余空间），多个值用逗号分隔。
cols：按水平方向分割窗口，属性值格式同 rows。
用于定义 <frameset> 中的每个子窗口，每个 <frame> 对应一个独立的 HTML 文档，常用属性：
src：指定子窗口加载的 HTML 文档路径（必填）。
name：给子框架命名，用于后续链接跳转目标。
noresize：禁止用户拖动调整子框架大小（可选）。
scrolling：指定是否显示滚动条（yes/no/auto，默认auto）。
这个示例将浏览器窗口垂直分割为上下两部分，水平分割下方窗口为左右两部分。在编写主页面前，需要分别准备三个文件，如下：
frame_header.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML教程</title>
<style>
html,body {
margin: 0; padding: 10px; box-sizing: border-box;
background: rgb(213, 251, 208);
}
</style>
</head>
<body>
<h1>HTML Frameset 框架</h1>
</body>
</html>frame_sidebar.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML教程</title>
<style>
html,body {
margin: 0; padding: 10px; box-sizing: border-box;
background: rgb(250, 221, 246);
}
</style>
</head>
<body>
<h3>功能列表</h3>
<ul>
<li>用户管理</li>
<li>菜单管理</li>
<li>角色管理</li>
<li>部门管理</li>
</ul>
</body>
</html>frame_content.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML教程</title>
<style>
html,body {
margin: 0; padding: 10px; box-sizing: border-box;
background: rgb(188, 188, 250);
}
</style>
</head>
<body>
<h1>工作区域</h1>
</body>
</html>最后通过 frameset + frame 将上面三个页面组装起来：
<!DOCTYPE html>
<html>
<!-- 注意：没有<body>标签，frameset直接替代body -->
<frameset rows="20%, 80%" noresize>
<!-- 上方框架：占20%高度，加载header.html -->
<frame src="frame_header.html" name="topFrame" scrolling="no">
<!-- 下方框架集：占80%高度，水平分割为3:7 -->
<frameset cols="30%, 70%">
<!-- 左侧框架：加载sidebar.html -->
<frame src="frame_sidebar.html" name="leftFrame" noresize>
<!-- 右侧框架：加载content.html -->
<frame src="frame_content.html" name="mainFrame">
</frameset>
<!-- 备用内容：当浏览器不支持框架时显示 -->
<noframes>
<body>你的浏览器不支持框架功能，请升级现代浏览器。</body>
</noframes>
</frameset>
</html>运行示例，效果如下图：
<frameset>/<frame> 被淘汰的原因如下：
不符合 HTML5 语义化标准：HTML5 强调标签的语义性，<frameset>/<frame> 仅用于布局分割，无任何语义含义，和 HTML5 的设计理念相悖。
可访问性极差：屏幕阅读器等辅助设备难以识别框架结构，对残障用户不友好。
SEO 不友好：搜索引擎爬虫难以抓取多个框架中的内容，会影响页面的搜索排名。
布局灵活性差：框架大小调整受限，难以实现响应式布局（无法适配手机、平板等移动设备）。
存在安全隐患：容易遭受点击劫持（Clickjacking）等攻击，且多个框架之间的跨域交互复杂。
既然 <frameset>/<frame>已经被淘汰，如果我们要实现 “多区域独立加载 / 布局” 的需求，有以下更优的现代方案：
（1）CSS 布局（首选）：使用 Flexbox、Grid、Position 等 CSS 属性实现页面分割布局，灵活性极高，支持响应式设计，是目前页面布局的主流方案。
（2）AJAX 动态加载：通过 JavaScript（或 jQuery）的 AJAX 技术，在不刷新整个页面的情况下，动态加载部分内容到指定区域，实现“子窗口”的独立更新效果。
（3）前端组件化框架：在 Vue、React、Angular 等现代前端框架中，通过组件拆分（如头部组件、侧边栏组件、内容组件），实现页面的模块化拆分，本质上替代了传统框架的功能，且可维护性更强。
和 <frameset>/<frame> 不同，<iframe> 是在当前 HTML 页面中嵌入一个独立的子窗口，不会分割整个浏览器窗口，且被 HTML5 完全支持，常用在嵌入地图、视频、第三方插件等场景。
<iframe> 主要属性如下：
src：嵌入的 HTML 文档 / 外部资源路径（必填）。
width/height：内联框架的宽高（像素或百分比）。
frameborder：是否显示框架边框（0= 不显示，1= 显示，HTML5 推荐用 CSS 替代）。
sandbox：安全沙箱，限制嵌入内容的权限（如禁止脚本执行、禁止表单提交，提升安全性）。
title：描述框架内容，提升可访问性。
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML教程</title>
</head>
<body>
<h2>嵌入内联框架示例</h2>
<!-- 嵌入百度首页，宽800像素，高500像素，无边框 -->
<iframe
src="https://www.baidu.com"
width="800"
height="500"
frameborder="0"
title="嵌入的百度首页">
你的浏览器不支持iframe标签，请升级。
</iframe>
</body>
</html>运行示例，效果如下图：
关于更多HTML相关知识请学习后续教程……
川公网安备51010802032098