在 HTML 中,我们可以使用 iframe 标签来实现一个内嵌框架。内嵌框架,说白了就是在当前页面再嵌入另外一个网页,类似 “画中画” 的效果。
语法:
<iframe src="链接地址" width="数值" height="数值" title="描述文字"></iframe>说明:
iframe 框架常用的有以下 3 个属性。
src(必选):表示要嵌入另一个页面的地址。width(可选):表示框架的宽度。height(可选):表示框架的高度。title(可选):内容描述。
注意: 为了保证无障碍访问(例如屏幕阅读器用户),现代标准强烈建议始终包含 title 属性。
示例 1:使用 HTML 框架嵌入一个页面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<iframe src="https://www.lvyenet.com" width="400" height="300" title="绿叶网"></iframe>
</body>
</html>页面效果如下图所示。

分析:
iframe 实际上就是在当前页面嵌入了另外一个页面,我们也可以同时嵌入多个页面。
示例 2:使用 HTML 框架嵌入多个页面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<iframe src="https://www.lvyenet.com" width="400" height="300" title="绿叶网"></iframe>
<iframe src="https://www.bilibili.com" width="400" height="300" title="哔哩哔哩"></iframe>
</body>
</html>
页面效果如下图所示。

分析:
可能有些小伙伴在其他教程上看到还有什么 frameset、frame 标签,事实上这几个标签在 HTML5 标准中已经被废弃了。对于 HTML 框架,我们只需要掌握 iframe 这一个标签就可以了。
