HTML Iframe框架

HTML Iframe框架用于在网页内显示另一个网页。

添加 iframe 的语法


<iframe src="URL"></iframe>

URL 嵌入的另一个网页的位置。

Iframe - 设置高度和宽度

height 和 width 属性用于规定 iframe 的高度和宽度。
属性值的默认单位是像素，如： width="200" height="200" 但也可以用百分比来设定（比如 "80%"）。

实例

<!DOCTYPE html>
<html>
<body>
<iframe src="/course/demo/html/frame_a.html" width="200" height="200"></iframe>
<p>某些老式的浏览器不支持内联框架。</p>
<p>如果不支持，则 iframe 是不可见的。</p>
</body>
</html>

Iframe - 删除边框

frameborder 属性规定是否显示 iframe 周围的边框： frameborder="0"
设置属性值为 "0" 就可以移除边框：

实例

<!DOCTYPE html>
<html>
<body>
<iframe src="/course/demo/html/frame_a.html" frameborder="0"></iframe>
<p>某些老式的浏览器不支持内联框架。</p>
<p>如果不支持，则 iframe 是不可见的。</p>
</body>
</html>

使用 iframe 作为链接的目标

iframe 可用作链接的目标（target）:target="iframe_a"
链接的 target 属性必须引用 iframe 的 name 属性：

实例

<!DOCTYPE html>
<html>
<body>
<iframe src="/course/demo/html/frame_a.html" name="iframe_a"></iframe>
<p><a href="https://www.xuewangzhan.net/baike/" target="iframe_a" rel="noopener noreferrer">学做网站论坛站长百科</a></p>
<p><b>注释：</b>由于链接的目标匹配 iframe 的名称，所以链接会在 iframe 中打开。</p>
</body>
</html>

HTML iframe 标签

标签	描述
<iframe>	定义内联的子窗口（框架）

上一课: HTML 表单下一课: HTML 框架

学做网站论坛专注网站培训

当前位置：