HTML 框架

在 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>

页面效果如下图所示。

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>

页面效果如下图所示。

HTML嵌入多个框架

分析:

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

上一篇: HTML 下拉列表

下一篇: HTML 语义化

给站长反馈

绿叶网正在不断完善中,小伙伴们如果发现任何问题,还望多多给站长反馈,谢谢!

邮箱:lvyenet@vip.qq.com

「绿叶网」服务号
绿叶网服务号放大
关注服务号,微信也能看教程。
绿叶网服务号