HTML iframe（内联框架）标签详解

HTML中的<iframe>标签可以创建一个内联框架，用来嵌入其他网页或文档。使用<iframe>标签可以为你的网页添加更多的内容，同时还可以提供更好的用户体验和功能。本文介绍了如何使用<iframe>标签，包括其属性和代码示例。

基本语法

使用<iframe>标签需要指定被嵌入的文档的URL：

<iframe src="url"></iframe>

其中，src属性指定被嵌入的文档的URL。

除了指定src属性外，可以使用其他属性来定制<iframe>标签的外观和行为。

属性

下面是<iframe>标签最常用的属性：

• src：被嵌入的文档的URL。

• width：框架的宽度，可以是具体的像素值，也可以是百分比。

• height：框架的高度，可以是具体的像素值，也可以是百分比。

• frameborder：是否在框架周围显示边框（0表示无边框，1表示有边框）。

• scrolling：是否允许滚动（auto表示自动，yes表示允许，no表示禁止）。

除了这些常用属性外，还有一些其他属性可以定制<iframe>标签的行为：

• allowfullscreen：是否允许全屏显示。

• allowpaymentrequest：是否允许支付请求。

• name：指定框架的名称，在同一个页面中可以使用target属性来定位该框架。

• sandbox：指定一个安全环境，可以限制被嵌入的文档的行为，包括禁止脚本、禁止表单等。

代码示例

下面是一个简单的<iframe>标签示例：

<iframe src="https://www.baidu.com" width="500px" height="500px"></iframe>

这个例子将嵌入百度的网页，并设置了框架的宽度和高度。

以下是一个带有边框和滚动条的<iframe>标签示例：

<iframe src="https://www.baidu.com" width="500px" height="500px" frameborder="1" scrolling="yes"></iframe>

这个例子增加了frameborder和scrolling属性，使得框架周围显示边框，并允许滚动条。

如果需要指定一个框架名称，可以使用name属性：

<iframe src="https://www.baidu.com" width="500px" height="500px" name="myframe"></iframe>

在同一个页面中，可以使用target属性来指向该框架：

<a href="https://www.baidu.com" target="myframe" rel="noopener">在框架中打开百度</a>

最后，以下是一个在框架中显示视频的示例：

<iframe src="https://www.youtube.com/embed/2aFZfaCg-6U" width="500px" height="315px" frameborder="0" allowfullscreen></iframe>

这个例子使用了YouTube的嵌入代码，可以在框架中显示一个视频，并允许全屏显示。