如何使用 HTML5 创建内联框架
概述
内联框架是一种 HTML iframe，它将嵌入在 iframe 中的另一个 HTML 文档显示到当前网页。iframe 标签也是一种内联框架，它将其他网页内容显示在框架内。iframe 具有各种属性，包括:宽度、高度、标题和 src。src 属性是 iframe 标签的主要属性，因为它指定了应在 iframe 中显示哪些内容。在一个框架内，我们可以滚动显示所有内容，其链接由 src 属性指定。
语法
以下是创建 HTML 内联框架的简单基本语法。该语法还显示了两个属性 src 和 frameborder，src 用于获取 HTML 文档的链接，frame border 用于将边框添加到 iframe。
<iframe src="" frameborder="0"></iframe>
算法
步骤 1 − 在文本编辑器(例如 Notepad++、Sublime Editor 或 VS Code)中创建一个 HTML 文件。将 HTML 样板添加到 HTML 文件中。
步骤 2 − 现在创建一个父 div 容器。
步骤 3 − 在容器内创建一个 <iframe> 标签。
<iframe></iframe>
步骤 4 − 向 iframe 标签添加某些属性，例如 src、width 和 height。设置 iframe HTML 标签的宽度和高度。
<iframe src="" width="" height=""></iframe>
步骤 5 − 现在，将任意链接添加到 src 属性，以在框架内显示 HTML 文档。
步骤 6 − 使用内联 CSS 为框架设置样式。
步骤 7 − 内联框架已成功创建。
示例
在给定的示例中，我们将使用 HTML 创建内联框架。因此，我们将使用基本的 HTML iframe 来构建内联框架。内联框架是一个普通的默认 iframe。
<html>
<head>
<title>inline frame HTML5</title>
</head>
<body style="display: flex;align-items: center;justify-content: center;flex-direction: column;">
<h2>tutorialspoint.com</h3>
<iframe src="http://tutorialspoint.com/" height="300" width="200"
style="border-radius: 5px;border-top: 2rem solid black;border-bottom: 2rem solid black;border-right: 0.5rem solid black;border-left: 0.5rem solid black;">
</iframe>
</body>
</html>
下图展示了上述示例的输出，其中我们使用了"tutorialspoint.com"官方网站链接，该链接将显示在 iframe 内联框架中。
结论
iframe 充当框架，将其他 HTML 文档嵌入到我们正在使用 iframe 的当前网页中。在网站或移动应用中，iframe 主要用于将谷歌地图嵌入到应用中，因为许多应用需要在其某些产品中使用地图。在一些网站中，开发人员使用 iframe 将当前网站的图形转换为矢量图形，以便在任何响应式屏幕上显示。如果我们要将任何视频嵌入到 iframe 中，则它支持"allowfullscreen"属性，允许用户全屏观看视频。
