HTML Iframe

HTML Iframe 语法

HTML <iframe> 标签指定一个内联框架。

内联框架用于在当前 HTML 文档中嵌入另一个文档。

语法

<iframe src="url" title="描述"></iframe>

提示：始终为 <iframe> 包含 title 属性是一个好习惯。屏幕阅读器使用它来读取 iframe 的内容描述。

Iframe - 设置高度和宽度

使用 height 和 width 属性指定 iframe 的尺寸。

默认情况下，高度和宽度以像素为单位指定：

实例

<iframe src="demo_iframe.htm" height="200" width="300" title="Iframe 实例"></iframe>

亲自试一试

或者您可以添加 style 属性并使用 CSS height 和 width 属性：

实例

<iframe src="demo_iframe.htm" style="height:200px;width:300px;" title="Iframe 实例"></iframe>

亲自试一试

Iframe - 移除边框

默认情况下，iframe 周围有一个边框。

要移除边框，请添加 style 属性并使用 CSS border 属性：

实例

<iframe src="demo_iframe.htm" style="border:none;" title="Iframe 实例"></iframe>

亲自试一试

使用 CSS，您还可以更改 iframe 边框的尺寸、样式和颜色：

实例

<iframe src="demo_iframe.htm" style="border:2px solid red;" title="Iframe 示例"></iframe>

亲自试一试

Iframe - 作为链接的目标

iframe 可用作链接的目标框架。

链接的 target 属性必须引用 iframe 的 name 属性：

实例

<iframe src="demo_iframe.htm" name="iframe_a" title="Iframe 实例"></iframe>

<p><a href="https://www.w3school.com.cn" target="iframe_a">W3School.com.cn</a></p>

亲自试一试

本章总结

• HTML <iframe> 标签指定一个内联框架
• src 属性定义要嵌入的页面的 URL
• 始终包含 title 属性（供屏幕阅读器使用）
• height 和 width 属性指定 iframe 的尺寸
• 使用 border:none; 移除 iframe 周围的边框

HTML iframe 标签

如需查看所有可用 HTML 标签的完整列表，请访问我们的 HTML 标签参考手册。