HTML Iframe


HTML iframe 用于在网页中显示网页。



HTML Iframe 语法

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

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

语法

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

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


Iframe - 设置高度和宽度

使用heightwidth属性来指定 iframe 的大小。

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

示例

<iframe src="demo_iframe.htm" height="200" width="300" title="Iframe Example"></iframe>
亲自试一试 »

或者您可以添加style属性并使用 CSSheightwidth特性:

示例

<iframe src="demo_iframe.htm" style="height:200px;width:300px;" title="Iframe Example"></iframe>
亲自试一试 »


Iframe - 删除边框

默认情况下,iframe 周围有边框。

要删除边框,请添加style属性并使用 CSSborder属性:

示例

<iframe src="demo_iframe.htm" style="border:none;" title="Iframe Example"></iframe>
亲自试一试 »

使用 CSS,您还可以更改 iframe 边框的大小、样式和颜色:

示例

<iframe src="demo_iframe.htm" style="border:2px solid red;" title="Iframe Example"></iframe>
亲自试一试 »

Iframe - 链接的目标

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

这个target链接的属性必须引用nameiframe 的属性:

示例

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

<p><a href="https://www.91xjr.com" target="iframe_a">91xjr.com</a></p>
亲自试一试 »

章节总结

  • HTML<iframe>标签指定内联框架
  • 这个src属性定义要嵌入的页面的 URL
  • 始终包含一个 title属性(用于屏幕阅读器)
  • 这个heightwidth属性指定 iframe 的大小
  • 使用border:none;删除 iframe 周围的边框

HTML练习

通过练习测试一下

练习:

创建一个 URL 地址为 https://www.91xjr.com 的 iframe。

<iframe ="https://www.91xjr.com"></iframe>

开始练习


HTML iframe 标签

Tag Description
<iframe> Defines an inline frame

有关所有可用 HTML 标签的完整列表,请访问我们的HTML 标签参考