数据结构
网络
RDBMS
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究如何使用 HTML5 创建内联框架
概述
内联框架是一个 HTML iframe，它显示另一个 HTML 文档嵌入在当前网页的 iframe 中。iframe 标签是一个内联框架，它在框架内显示其他网页内容。iframe 也有各种属性，例如：宽度、高度、标题和 src。src 属性是 iframe 标签的主要属性，因为它指定了在 iframe 中应该显示什么内容。在一个框架内，我们可以滚动其链接在 src 属性中指定的整个内容。
语法
以下是创建 HTML 内联框架的简单基本语法。语法还显示了两个属性 src 和 frameborder，src 用于获取 HTML 文档的链接，frameborder 用于为 iframe 设置边框。
<iframe src="" frameborder="0"></iframe>
算法
步骤 1 − 在文本编辑器（如 Notepad++、Sublime Text 或 VS Code）中创建一个 HTML 文件。将 HTML 基本结构添加到 HTML 文件中。
步骤 2 − 现在创建一个父 div 容器。
步骤 3 − 在容器内创建一个 <iframe> 标签。
<iframe></iframe>
步骤 4 − 向 iframe 标签添加某些属性，例如 src、宽度和高度。设置 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="https://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 主要用于将 Google 地图嵌入到应用程序中，因为许多应用程序需要在地图中使用其某些产品。在某些网站中，开发人员使用 iframe 使当前网站的图形矢量能够在任何响应式屏幕中显示。如果我们正在将任何视频嵌入到 iframe 中，则它支持一个“allowfullscreen”属性，该属性允许用户以全屏观看视频。
406 次查看
