在本 HTML 教程中,您将了解 HTML 中的 iframe。我们还将讨论 HTML iframe 标签中使用的属性。
使用 iframe 或内联框架,可以在网页中显示其他内容,例如其他网页。iframe 本质上是浏览器中的一个浏览器。此外,iframe 中的内容独立于周围的组件。
<iframe src="URL"></iframe>
src 属性指定一个 URL,该 URL 链接到外部对象或网页的位置。
<!DOCTYPE html>
<html>
<body>
<h2>HTML Iframes</h2>
<iframe src="demo.html">
</iframe>
</body>
</html>

可以使用 "width" 和 "height" 参数来指定 iframe 的宽度和高度。默认情况下,属性的值以像素为单位,但您也可以选择以百分比表示。例如,50%、60% 等。
<!DOCTYPE html>
<html>
<body>
<h2>HTML Iframes</h2>
<iframe src="demo.html" height = “500” width = “500”></iframe>
</iframe>
</body>
</html>

默认情况下,iframe 周围会有一个边框。如果要更新或删除 iframe 边界,CSS border 属性是最佳解决方案。
<!DOCTYPE html>
<html>
<body>
<h2>HTML Iframes</h2>
<iframe src="demo.html" height = “500” width = “500” ></iframe>
</iframe>
</body>
</html>

iframe 也可用于定位超链接。name 属性可用于为 iframe 命名。这意味着如果您点击一个将该名称作为 target 属性的链接,则关联的资源将在该 iframe 中打开。
<!DOCTYPE html>
<html>
<body>
<h2>HTML Iframes</h2> <iframe src="" height = "200" width = "500" name="myFrame"
<p><a href="demo.html" target="myFrame">Open frame</a></p>
</iframe>
</body>
</html>
点击链接前

点击链接后

我们可以使用 iframe 将 YouTube 视频嵌入到 HTML 中。
<!DOCTYPE html>
<html>
<body>
<iframe width="560" height="315" src="https://www.youtube.com/embed/jlCq_xqC5fg" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</body>
</html>
