HTML 内联框架


2022年1月19日, 学习电子教程
1707

在本 HTML 教程中,您将了解 HTML 中的 iframe。我们还将讨论 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>

HTML - Introduction

使用 HTML 中 iFrame 标签的 Width 和 Height 属性

可以使用 "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>

HTML - Introduction

删除 HTML 中 Iframe 的默认边框

默认情况下,iframe 周围会有一个边框。如果要更新或删除 iframe 边界,CSS border 属性是最佳解决方案。


<!DOCTYPE html> 
<html> 
<body> 
<h2>HTML Iframes</h2> 
<iframe src="demo.html" height = “500” width = “500” ></iframe> 
</iframe> 
</body> 
</html>

HTML - Introduction

将 iFrame 用作链接目标

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>

点击链接前

HTML - Introduction

点击链接后

HTML - Introduction

嵌入 YouTube 到 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>

HTML - Introduction