目录
- 1 iframe框架概述
- 2 iframe常用属性
- 2.1 name属性
- 2.2 src属性
- 2.3 width属性
- 2.4 height属性
- 2.5 frameboder属性
- 2.6 其他
- 3 应用案例
- 4 归纳
- 参考文章
1 iframe框架概述
作用:< iframe > 标签规定一个内联框架。一个内联框架被用来在当前 HTML 文档中嵌入另一个文档。即在一个页面中引入另一个页面,实现页面之间的嵌套。可以把需要的文本放置在 < iframe > 和 < /iframe > 之间,这样就可以应对不支持 < iframe > 的浏览器。
使用 CSS 为 < iframe >(包括滚动条)定义样式。
语法示例:
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<iframe src="//www.runoob">
<p>您的浏览器不支持 iframe 标签。</p>
</iframe>
</body>
</html>
2 iframe常用属性
2.1 name属性
作用:规定 < iframe > 的名称,并具有下列用途
- 用于在 JavaScript 中引用元素;
- 作为< a >或< form >元素的 target 属性的值;
- 作为 或 的 formtarget 属性的值。
语法:<iframe name="自定义名称">
2.2 src属性
作用:在iframe中显示的文档的URL。
语法:<iframe src="URL">
可能的值:
- 绝对 URL :指向另一个网站(比如 src=“http://www.example/default.htm”)
- 相对 URL :指向网站中的一个文件(比如 src=“default.htm”)
2.3 width属性
作用:规定< iframe >的宽度,以像素计。
语法:<iframe width="pixels">
。
取值:以像素为单位的内联框架的高度(比如 “100px”)也可以为百分比,如100%。
注意:在HTML 4.01中,宽度应该被定义为以像素为单位或者以包含元素的百分比为单位。在 HTML5中,宽度值必须以像素为单位。
2.4 height属性
作用:规定< iframe >的高度,以像素计。
语法:<iframe height="pixels">。
取值:以像素为单位的内联框架的高度(比如 “100px”)。
注意:在 HTML 4.01 中,高度应该被定义为以像素为单位或者以包含元素的百分比为单位。在 HTML5 中,高度值必须以像素为单位。
2.5 frameboder属性
作用:是否显示框架周围的边框,当属性值为1,则显示边框,为0则不显示边框。
语法:<iframe frameboder="1 | 0">。
2.6 其他
其他属性如seamless、sandbox等请参考《HTML< iframe >标签》。
可以利用菜鸟在线编辑器尝试不同属性的应用结果。
3 应用案例
<html>
<head>
<meta charset="utf-8">
<title>
testIframe
</title>
</head>
<body>
<h1>testIframe </h1>
<a href="http://www.baidu" target="myframe">百度</a> <br/>
<a href="http://www.qq" target="myframe">QQ</a> <br/>
<a href="http://www.sohu" target="myframe">搜狐</a> <br/>
<iframe name="myframe" width="100%" frameboder="0"></iframe>
</body>
</html>
运行结果如下,当点击百度、QQ或搜狐时,会在iframe框中显示击百度、QQ或搜狐的网页,并且可以正常使用。
4 归纳
(1)了解iframe的作用;
(2)掌握iframe常用属性的作用及用法;
(3)学会将超链接< a >标签与< iframe >结合使用。
参考文章
[1] 《HTML< iframe >标签》
[2] 《【HTML基础】iframe框架》
更多推荐
【HTML基础-3】iframe框架详解及应用案例—实现页面嵌套
发布评论