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.com"><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.com/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.com" target="myframe">百度</a> <br/><a href="http://www.qq.com" target="myframe">QQ</a> <br/><a href="http://www.sohu.com" 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框架详解及应用案例—实现页面嵌套相关推荐

list集合下标从几开始_Java基础进阶集合框架详解
今日任务 1.List接口介绍(掌握常用List特有方法) 2.练习 3.ArrayList介绍(必须清楚集合的特征.掌握集合中的方法) 4.LinkedList介绍(必须清楚集合的特征.掌握集合中的 ...
SLF4J和Logback日志框架详解
SLF4J和Logback日志框架详解作者:chszs,转载需注明.博客主页:http://blog.csdn.net/chszs 本文讲述SLF4J和Logback日志框架. SLF4J是一 ...
java编译器源码详解_已更新至第8章 | LLVM 编译框架详解
LLVM是什么? 我又不做编译器研究,干嘛要管它? 这是一些朋友想要对LLVM发起的提问,那么今天我们就来看看那款据说很酷炫的编译器--LLVM. LLVM是什么? LLVM是一个自由软件项目,它是一 ...
【传智播客郑州校区分享】AndroidAnnotations框架详解
AndroidAnnotations框架详解文/传智播客郑州中心就业服务部简介在之前的开发中,你肯定用到了xUtils及ButterKnife等依赖注入框架,你可以使用这些框架来简化你的代码,因 ...
双目视觉集合框架详解
双目视觉几何框架详解一.图像坐标:我想和世界坐标谈谈(A) 玉米竭力用轻松具体的描述来讲述双目三维重建中的一些数学问题.希望这样的方式让大家以一个轻松的心态阅读玉米的<计算机视觉学习笔记> ...
Android 动画框架详解
Android 动画框架详解基本原理朱韦伟, 软件工程师, IBM 李浩, 软件工程师, 爱格码简介: Android 平台提供了一套完整的动画框架,使得开发者可以用它来开发各种动画效果.A ...
Pytest框架详解（二）
Pytest框架详解(二) 文章目录 Pytest框架详解(二) 一.引言二.参数化列表嵌套元组三.标记 3.1显式指定 3.2模糊匹配 3.3pytest.mark 四.配置文件五.依赖六 ...
Java--集合框架详解
文章目录 1.集合概念 2.Collection接口 2.1.Collection父接口 2.2.**Collection的使用** 3.List接口与实现类 3.1.List子接口 3.2.List ...
Android基础总结： Camera2详解之一 API学习
Camera2的API出来有些年头了,只是赶项目多次使用,没时间好好总结,年终了,正好结合google的官方Camera2demo 和开发中使用的情况,做个详细梳理,研究总结之后,才发现Camera2 ...

【HTML基础-3】iframe框架详解及应用案例—实现页面嵌套

目录