<iframe> 标签定义 HTML 内联框架,其结束标签为 </iframe> 。
所谓内联框架,指的是可以在当前 HTML 文档中嵌入另一个文档,并且可以同时显示出来。
通过使用内联框架,可以在同一个浏览器窗口中显示不止一个页面。
在当前页面中再次显示“HTML 入门”笔记内容:
内联框架的语法非常简单,其中 src 属性指向要显示的页面地址。
<iframe src="url"></iframe>
尝试一下
标签 | 属性 | 属性值 | 描述 |
---|---|---|---|
<iframe> | src | 定义指向的页面地址 | |
name | 定义内联框架名称 | ||
width |
可以是具提数值,也可以是百分比 比如:100 和 70% 单位默认为像素(px) |
定义内联框架的宽度 | |
height |
可以是具提数值,也可以是百分比 比如:100 和 70% 单位默认为像素(px) |
定义内联框架的高度 | |
frameborder |
0:无边框 1:有边框 no:无边框 yes:有边框 |
定义内联框架的边框 |
width 和 height 属性用来定义内联框架的宽高。
属性值可以是数值也可以是百分比,默认以像素(px)为单位。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>内联框架宽高</title>
</head>
<body>
<iframe src="http://www.bjbcode.com/" width="100%" height="300"></iframe>
</body>
</html>
尝试一下
frameborder 属性用来设置内联框架的边框。
属性值:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>内联框架边框</title>
</head>
<body>
<iframe src="http://www.bjbcode.com/" frameborder="0"></iframe>
</body>
</html>
尝试一下
我们可以使用内联框架的 src 属性指向需要展示的页面,也可以不用 src 属性,通过点击 <a> 标签向内联框架里展示指定的页面。
以下示例中,<a> 标签的 target 属性的值,是 <iframe> 的名称:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>显示链接里的页面</title>
</head>
<body>
<iframe src="" name="iframe_a" width="100%" height="300"></iframe>
<a href="html-first.html" target="iframe_a">HTML 入门</a>
</body>
</html>
尝试一下