许多刚入门HTML的学习者，可能会忽视框架标签，觉得它“不常用”或“有点过时”。然而，无论是在维护遗留项目，还是在实现简单的页面嵌套场景中，框架标签都有着不可替代的实用性。深入理解它，能帮助你更好地掌握网页结构嵌套的逻辑，为后续学习更复杂的布局技术打下坚实基础。
本文将系统性地讲解HTML中三种核心的框架标签：frameset、frame和iframe。我们会从基本概念出发，逐一拆解语法、核心属性，并通过可直接复现的代码示例，展示其在实际场景中的应用，最后还会指出新手常见的误区。
一、什么是HTML框架标签？
用最直白的语言描述：HTML框架标签，就是能让一个HTML页面嵌套显示另一个（或多个）独立HTML页面的工具。
你可以将其想象为在一张主画布上开一个或多个“窗口”，每个窗口都能独立显示一张完整的“子画布”（即另一个HTML页面）。普通的HTML页面，所有内容都存在于同一张“画布”上；而使用框架标签后，你可以将主页面划分为多个区域，每个区域承载一个拥有独立HTML、CSS甚至JavaScript逻辑的页面，它们互不干扰。
典型应用场景：
- 传统后台管理系统：顶部导航栏、左侧菜单栏和右侧内容区通常由三个独立的HTML页面通过框架组合而成。点击左侧菜单，仅右侧内容区刷新，其他部分保持不变。
- 嵌入第三方内容：网页中常见的视频播放器（如腾讯视频、优酷的嵌入）、在线地图或某些外部小工具，大多是通过
iframe标签嵌入的独立页面。
总结来说，框架标签的核心价值在于 “页面嵌套” 和 “代码复用” ，能够有效提升多页面、结构固定型网站的开发和维护效率。
二、为何需要学习框架标签？
尽管现代前端布局更倾向于使用CSS Flexbox、Grid等方案，但学习框架标签依然必要，原因有四：
- 夯实基础，理解结构：学习框架标签是理解复杂页面“拆分-组合”思维的绝佳途径，这种思维方式对后续学习前端工程化、组件化开发大有裨益。
- 提升效率，减少重复：对于多个页面共享的公共部分（如页头、页脚、导航栏），可将其独立为单独的HTML文件，再通过框架引入。修改时只需改动一个文件，所有引用页面同步更新，极大提升了维护效率。
- 维护旧项目的必备技能：大量遗留的企业内部系统、早期网站都是基于
frameset构建的。若不了解框架标签，面对这些项目时将无从下手。
- 嵌入外部内容的高频需求：在当前开发中，
iframe仍是嵌入第三方服务（地图、视频、在线支付、社交媒体插件等）最常用的技术手段。
三、核心框架标签详解
HTML中主要有三种框架标签：frameset、frame和iframe。请注意一个关键区别：frameset与frame必须配套使用，而iframe可以独立使用。
1. frameset 与 frame 标签：配套使用的布局组合
这对标签通常用于构建传统的固定布局页面。frameset负责定义页面区域的划分（行或列），frame则负责在每个划分好的区域内嵌入具体的HTML页面。
重要提示：frameset标签与body标签是互斥的。如果一个页面使用了frameset，就不能再有body标签，反之亦然。
（1）frameset 标签：划分区域
它通过rows（上下分栏）或cols（左右分栏）属性来定义区域大小。
- 核心属性：
rows：定义横向（上下）分割，值为一系列高度，用逗号分隔。单位可为像素px、百分比%或*（表示占用剩余空间）。例：rows="100px, *, 50px"。cols：定义纵向（左右）分割，用法同rows。border：设置框架边框的宽度（像素）。设为0则不显示边框。
基本语法结构如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>frameset标签示例</title>
</head>
<!-- frameset标签：划分页面区域，和head并列，没有body标签 -->
<frameset rows="高度1,高度2,..." cols="宽度1,宽度2,..." border="边框宽度">
<!-- 每个区域，都用一个frame标签，嵌入独立的HTML页面 -->
<frame src="第一个页面的路径"></frame>
<frame src="第二个页面的路径"></frame>
<!-- 有多少个区域，就写多少个frame标签 -->
</frameset>
</html>
（2）frame 标签：嵌入页面
它必须位于frameset内部，用于在指定区域加载页面。
- 核心属性：
src (必填)：指定要嵌入的HTML文件路径或URL。name：为框架区域命名。此名称可用于<a>标签的target属性，实现点击链接后，内容在指定框架内打开。noresize：禁止用户拖拽边框调整框架大小。scrolling：控制滚动条，可选auto（自动）、yes（始终显示）、no（始终隐藏）。
（3）实战示例：构建后台管理布局
我们通过一个“上下分栏+嵌套左右分栏”的经典后台布局来实践。
第一步：创建项目文件
在同一目录下创建以下文件：
index.html：主框架页面nav.html：顶部导航menu.html：左侧菜单content.html：右侧默认内容footer.html：底部页脚
第二步：编写各页面代码
nav.html (顶部导航)：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>顶部导航栏</title>
<style>
/* 简单美化导航栏，新手可直接复制 */
body {
margin: 0;
padding: 0;
height: 60px;
background-color: #333;
color: white;
line-height: 60px;
text-align: center;
font-size: 20px;
}
</style>
</head>
<body>
后台管理系统 - 顶部导航栏
</body>
</html>
menu.html (左侧菜单)：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>左侧菜单</title>
<style>
/* 简单美化菜单，新手可直接复制 */
body {
margin: 0;
padding: 0;
background-color: #f5f5f5;
}
a {
display: block; /* 让链接独占一行 */
text-decoration: none; /* 去掉下划线 */
color: #333;
padding: 15px 20px;
font-size: 16px;
border-bottom: 1px solid #eee;
}
a:hover {
background-color: #ddd; /* 鼠标悬浮变色 */
}
</style>
</head>
<body>
<!-- 重点：target属性的值，要和右侧frame的name属性一致，实现点击切换页面 -->
<a href="content.html" target="mainContent">首页</a>
<a href="user.html" target="mainContent">用户管理</a>
<a href="order.html" target="mainContent">订单管理</a>
<a href="setting.html" target="mainContent">系统设置</a>
</body>
</html>
content.html (右侧默认内容)：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>首页内容</title>
<style>
body {
margin: 0;
padding: 20px;
color: #666;
line-height: 1.8;
}
h2 {
color: #333;
border-bottom: 1px solid #eee;
padding-bottom: 10px;
}
</style>
</head>
<body>
<h2>首页内容区域</h2>
<p>欢迎进入后台管理系统首页，点击左侧菜单，可切换对应内容。</p>
<p>这是一个独立的HTML页面，通过frame标签，嵌入到主页面的右侧区域。</p>
</body>
</html>
footer.html (底部页脚)：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>底部页脚</title>
<style>
body {
margin: 0;
padding: 0;
height: 40px;
background-color: #333;
color: white;
line-height: 40px;
text-align: center;
font-size: 14px;
}
</style>
</head>
<body>
版权所有 © 2026 后台管理系统 - 底部页脚
</body>
</html>
index.html (主框架页面，核心)：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>后台管理系统（frameset+frame示例）</title>
</head><!-- 重点1：frameset和body互斥，这里没有body标签 --><!-- 重点2：先上下分栏（rows），顶部60px、中间剩余空间、底部40px -->
<frameset rows="60px,* ,40px" border="1">
<!-- 顶部区域：嵌入nav.html，禁止调整大小 -->
<frame src="nav.html" noresize></frame>
<!-- 中间区域：左右分栏（cols），左侧200px、右侧剩余空间 -->
<frameset cols="200px,*" border="1">
<!-- 左侧区域：嵌入menu.html，禁止调整大小 -->
<frame src="menu.html" noresize></frame>
<!-- 右侧区域：嵌入content.html，name属性为mainContent（和左侧a标签的target对应） -->
<frame src="content.html" name="mainContent" noresize scrolling="auto"></frame>
</frameset>
<!-- 底部区域：嵌入footer.html，禁止调整大小 -->
<frame src="footer.html" noresize></frame>
</frameset>
</html>
第三步（可选）： 创建 user.html、order.html、setting.html 等页面，内容格式参照 content.html。完成后，在浏览器中打开 index.html，即可看到一个功能完整的后台框架布局，点击左侧菜单可在右侧区域切换内容。
（4）新手避坑指南
- 互斥性：牢记
frameset 与 body 标签不能共存于同一页面。
- 路径正确：
src 属性路径错误会导致框架区域空白。
- 命名一致：实现框架内链接跳转时，
<a> 标签的 target 值与对应 <frame> 的 name 值必须严格一致。
- 锁定布局：建议为
<frame> 添加 noresize 属性，防止用户拖乱布局。
- 分隔符：
rows 和 cols 属性值之间使用逗号分隔。
2. iframe 标签：独立灵活的嵌入工具
与 frameset/frame 不同，iframe 可以像普通标签一样放置在页面的任何位置，无需改变整体页面结构，灵活性极高，是现代开发中最常用的框架标签。
（1）核心属性详解
src (必填)：要嵌入的页面路径或完整URL。width / height：设置iframe窗口的宽高，可用像素或百分比。border：设置边框宽度，设为 0 可隐藏边框（推荐）。scrolling：滚动条控制，同 frame 标签。name：为iframe命名，用于链接的 target 属性。title：描述性标题，有助于无障碍访问，建议设置。
（2）基础语法
<iframe
src="要嵌入的页面路径/URL"
width="宽度"
height="高度"
border="0"
scrolling="auto"
title="iframe标题"
></iframe>
（3）三大实战场景与代码示例
场景1：嵌入本地独立页面
适用于将复杂模块独立成页，便于维护。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>iframe示例1：嵌入自己的页面</title>
<style>
body {
margin: 0;
padding: 20px;
font-family: "微软雅黑", sans-serif;
color: #333;
}
h1 {
text-align: center;
margin-bottom: 30px;
}
.container {
width: 800px;
margin: 0 auto;
}
/* 简单美化iframe，让它更美观 */
iframe {
border: 1px solid #eee;
border-radius: 8px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
</style>
</head>
<body>
<h1>主页面：嵌入自己的独立内容页面</h1>
<div class="container">
<p>下面是用iframe嵌入的内容页面（独立的HTML页面）：</p>
<br><!-- iframe标签：嵌入content.html页面，宽度100%，高度400px，隐藏边框 -->
<iframe
src="content.html"
width="100%"
height="400px"
border="0"
scrolling="auto"
title="内容页面"
></iframe>
</div>
</body>
</html>
场景2：嵌入外部网页
可用于集成第三方服务，如地图、天气等。
<iframe
src="https://www.baidu.com"
width="100%"
height="300px"
scrolling="auto"
title="百度首页"
></iframe>
注意：部分网站（如淘宝、京东）出于安全考虑设置了X-Frame-Options响应头，禁止被嵌入，此时iframe会显示空白，这属于正常现象。
场景3：嵌入在线视频
各大视频平台均提供iframe嵌入代码。
<iframe
src="https://v.qq.com/txp/iframe/player.html?vid=k00468zq8c8"
width="800"
height="450"
frameborder="0"
allowFullScreen="true"
title="示例视频"
></iframe>
获取方式：在视频平台的分享功能中，通常能找到“嵌入代码”选项，复制生成的iframe代码即可。
（4）iframe使用避坑点
- 共存性：
iframe可置于body内，与普通元素共存。
- URL完整性：嵌入外部页面时，
src必须是完整的https://或http://开头的URL。
- 尺寸适配：根据嵌入内容合理设置宽高。嵌入视频建议使用16:9等固定比例。
- 边框处理：默认有边框，通常通过
border="0"清除。
- 闭合标签：虽然HTML5允许自闭合，但建议使用
</iframe>显式闭合以保证兼容性。
四、frameset+frame 与 iframe 的核心区别
为了更清晰地理解两者的不同，以下是关键区别对比：
| 对比维度 |
frameset + frame 标签 |
iframe 标签 |
| 使用方式 |
配套使用，frameset划分区域，frame嵌入页面 |
独立使用，直接嵌入页面，无需配套标签 |
| 页面结构 |
替代整个body，用于构建整体页面框架 |
作为内联元素插入body中，用于局部嵌入 |
| 灵活性 |
较低，布局固定 |
极高，可置于页面任意位置 |
| 现代应用 |
主要用于理解和维护遗留系统 |
广泛应用于嵌入第三方内容、视频、地图等 |
| 与body关系 |
互斥，不能同时存在 |
可共存于body内 |
简单来说，frameset+frame像是为房子搭建承重墙，决定了整个房间的格局；而iframe则像是在墙上开一扇窗，透过这扇窗可以看到另一个独立的风景。在现代前端开发中，“开窗”（iframe）的需求远多于“重建格局”（frameset）。
五、总结
HTML框架标签，特别是iframe，并未随着时间推移而完全失效。frameset和frame是理解历史代码和特定布局思维的钥匙，而iframe则是当前实现页面嵌套、集成第三方服务不可或缺的实用工具。掌握它们，能使你在面对不同时期、不同需求的项目时更加游刃有余。
希望这份详细的指南能帮助你彻底理解并掌握HTML框架标签的用法。技术的学习在于实践，建议你亲手敲一遍文中的代码示例，体会其中的奥妙。如果在实践中遇到任何问题，欢迎在云栈社区与更多开发者交流探讨。
发表于 7 小时前
|
查看: 1|
回复: 0
