⚠重要提醒：
<frameset>、<frame>HTML5 已经废弃，不再推荐使用 ，仅做历史了解； 现在唯一还在使用的框架标签是<iframe>内联框架。
HTML 框架作用：把浏览器窗口切分成多个独立页面区域，每个区域加载一个单独的 html 文件。 简单理解：一个浏览器窗口，同时嵌入好几个网页。
分为两类：
- 老式框架：
frameset + frame（HTML5 废弃，不要写新项目） - 内联框架：
iframe（现在还在用，把另一个网页嵌入当前页面里面）
一、老式框架 frameset + frame（了解即可，禁止实际开发使用）
HTML4 时代使用，HTML5 已经完全删除。 ❗注意：使用
<frameset>的时候，不能有 body 标签！frameset 直接替代 body。
1、frameset 属性
rows：按行 切割窗口，上下分割。格式：高度1,高度2,...cols：按列 切割窗口，左右分割。格式：宽度1,宽度2,...数值可以写像素 px，也可以写百分比%，*代表剩余全部空间。
frame 属性
src：要加载的 html 文件地址name：框架名字，可以给 a 标签 target 用来指定在哪个框架打开链接noresize：禁止拖动分割条改变大小scrolling="no"：取消滚动条
示例 1：上下分割 rows
把页面分成上下两部分：上面 100 像素，剩下全部给下面
html
<!-- 注意：这里没有<body>标签！！ -->
<frameset rows="100,*">
<frame src="top.html" name="topFrame" noresize>
<frame src="main.html" name="mainFrame">
</frameset>效果：浏览器窗口切成上下两块，上块显示 top.html，下块显示 main.html。
示例 2：左右分割 cols
左边 200px，右边占剩下全部宽度
html
<frameset cols="200,*">
<frame src="left.html" name="left">
<frame src="right.html" name="right">
</frameset>示例 3：框架嵌套（经典后台布局：上，左，右）
顶部一行，下面再左右分栏
html
<!-- 先切上下，高度100，剩下* -->
<frameset rows="100,*">
<frame src="top.html">
<!-- 下面部分继续左右切分 -->
<frameset cols="220,*">
<frame src="menu.html">
<frame src="content.html">
</frameset>
</frameset>target 跳转到指定框架
left 页面里面的 a 链接，点击在 main 框架打开页面：
html
<a href="news.html" target="mainFrame">打开新闻</a>target="框架name值"，链接在指定框架窗口加载。
frameset 为什么被 HTML5 废弃（缺点）
- 不能放 body，页面结构怪异；
- 不利于搜索引擎抓取；
- 打印、移动端兼容性很差；
- 用户体验不好，后退按钮混乱。
✅结论：写作业可以了解，实际项目绝对不要用 frameset/frame。
二、iframe 内联框架（现在唯一在用的框架标签，重点学习）
<iframe>：在当前 HTML 页面里面，挖一块区域，嵌入另外一个网页。 不需要去掉 body，直接写在 body 里面。
基础语法
html
<iframe src="目标网页地址" width="宽度" height="高度"></iframe>常用属性
| 属性 | 说明 |
|---|---|
src |
嵌入网页的 url 地址，可以是本地 html，也可以是外部网址 |
width |
iframe 盒子宽度，可以 px 或者百分比 |
height |
iframe 盒子高度 |
frameborder="0" |
去掉 iframe 默认边框（常用） |
scrolling="no" |
是否显示滚动条；no = 不显示，yes 显示，auto 自动 |
name |
iframe 名字，a 标签 target 可以在此窗口打开页面 |
示例 1：嵌入本地另一个 html 页面
假设同一个文件夹有 news.html，把它嵌入当前页面一块区域
html
<!DOCTYPE html>
<html lang="zh‑CN">
<head>
<meta charset="UTF‑8">
<title>iframe演示</title>
</head>
<body>
<h2>当前主页面</h2>
<p>下面嵌入另外一个网页：</p>
<!-- 嵌入news.html，宽600，高350，去掉边框 -->
<iframe src="news.html" width="600" height="350" frameborder="0"></iframe>
</body>
</html>示例 2：a 链接 target 指向 iframe，点击链接在 iframe 里面打开页面
给 iframe 设置 name，a 标签 target 等于这个 name。
html
<body>
<p>点击下面链接，内容会在下方框内打开</p>
<a href="page1.html" target="myIframe">打开页面1</a>
<a href="page2.html" target="myIframe">打开页面2</a>
<!-- iframe命名为 myIframe -->
<iframe name="myIframe" width="700" height="400" frameborder="0"></iframe>
</body>效果：点击超链接，不新开浏览器标签页，在这个小方框内加载新网页。
示例 3：嵌入外部网站（注意很多网站禁止被 iframe 嵌套，会报错）
html
<iframe src="https://www.bilibili.com" width="800" height="500" frameborder="0" scrolling="auto"></iframe>⚠很多大型网站设置防盗链，拒绝被别人 iframe 嵌入，页面会空白或者报错，属于正常现象。
iframe 实际开发常见用途
- 嵌入视频播放器（视频网站的分享代码就是 iframe）
- 嵌入地图
- 后台管理系统局部页面刷新
- 嵌入第三方组件、表单
iframe 的缺点
- 搜索引擎不容易抓取 iframe 里面的内容；
- 页面加载变多，性能有损耗；
- 跨域限制：JS 很难操作 iframe 内外页面。
frameset 和 iframe 对比
| 标签 | 是否 HTML5 支持 | 原理 | 使用场景 |
|---|---|---|---|
| frameset+frame | ❌废弃 | 分割整个浏览器窗口，替代 body | 老项目历史代码，新项目禁用 |
| iframe | ✅支持 | 在当前页面中嵌入一块子网页 | 嵌入视频、地图、第三方页面 |
新手高频坑
- 使用 frameset 写代码还写了
<body>，页面直接乱掉。
frameset 不能和 body 共存，HTML5 直接不要学这个，了解即可。
-
iframe 没有写
frameborder="0"，四周有难看默认黑色边框。 -
想嵌入外部网站，页面空白。
对方网站设置 X‑Frame‑Options，禁止被 iframe 嵌套，这是网站安全设置，无法解决，换别的地址测试。
- target 名字写错，链接没有在 iframe 打开，而是新开窗口。
target 的值必须和 iframe 的
name属性完全一模一样，区分大小写。
完整可直接复制运行的 iframe 示例
html
<!DOCTYPE html>
<html lang="zh‑CN">
<head>
<meta charset="UTF‑8">
<title>iframe完整例子</title>
<style>
iframe{
border:1px solid #ccc;
}
</style>
</head>
<body>
<h1>主页面标题</h1>
<p>下面方框是嵌入的子页面区域</p>
<div>
<a href="https://example.com" target="box">加载示例页面</a>
</div>
<br>
<iframe
name="box"
src="https://example.com"
width="750"
height="420"
frameborder="0"
>
您的浏览器不支持iframe
</iframe>
</body>
</html>iframe 标签中间写文字，浏览器不支持 iframe 的时候会显示这段提示。
本篇知识点总结
<frameset>+<frame>HTML5 已废弃，把整个浏览器分割多个页面，仅作历史了解，新项目不要写。<iframe>内联框架仍然可用，在当前页面里面嵌入一小块子网页。- iframe 核心属性：
src地址、width/height尺寸、frameborder="0"去除边框，name配合 a 标签target在框内跳转页面。 - 用途：嵌入视频、地图、第三方页面；缺点：不利于 SEO，存在跨域限制。