轻松上手,快乐学习!

HTML Iframes 框架


iframe 用于在网页内显示网页。



HTML Iframe 语法

HTML 使用 <iframe> 定义一个内联的 iframe。

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

语法

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

提示: 最好为 <iframe> 设置 title 属性。屏幕阅读器使用它来读取 iframe 的内容。


Iframe - 设置高度和宽度

heightwidth 属性用于规定 iframe 的高度和宽度。

属性值的默认单位是像素,但也可以用百分比来设定:

实例

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

或者可以用 styleheightwidth 属性:

实例

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

Iframe - 删除边框

frameborder 属性规定是否显示 iframe 周围的边框。

设置属性值为 "0" 就可以移除边框。

或设置 style 属性的 border:none 移除边框。

实例

<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)。

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

实例

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

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

本章小结

  • <iframe> 标记指定内联框架
  • src 属性定义要嵌入的页面的URL
  • 始终包含标题 title 属性(对于屏幕阅读器有用)
  • height and width 高度和宽度属性指定 iframe 的大小
  • 使用 border:none; 删除 iframe 边框

HTML 实验

学习训练

练习题:

创建一个iframe,其URL地址指向 https://www.begtut.com.

<iframe ="https://www.begtut.com"></iframe>

开始练习


HTML iframe 标签

标签 描述
<iframe> 定义内联 iframe

如需所有可用的 HTML 标签的完整列表,请访问 HTML 标签参考手册