iframe 元素会创建包含另外一个文档的内联框架(即行内框架)。iframe是属于内联框架,它是body的子级,和body是父子关系。iframe作为一个普通元素放在body里。
属性
①width 可设置内联框架的宽
②height 可设置内联框架的高
③name 设置框架名称
④src 设置页面的路径
⑤scrolling规定是否在 iframe 中显示滚动条(yes,no,auto)
⑥ frameborder规定是否显示框架周围的边框(1默认有边框,0)
简单理解来说,iframe 就是用来对整个页面进行布局的框架,我们平时所使用的 div 、table等 都是局部的布局方式。所谓行内框架,事实上 iframe 是一个行内块的元素,我们都知道,HTML分为行元素和块元素,行内元素显示在同一行上,块级元素独占一行,块级元素可以设置宽高,行内元素不可以设置宽高,所以说 iframe 即可以显示在同一行上,又可以设置宽高。
Iframe 的应用
这里我引用一个常见的网页布局方式来举例说明
上 左 右 布局格式
上:logo、导航栏
左:菜单栏
右:主体
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Iframe框架</title>
</head>
<body>
<iframe src="http://www.baidu.com" frameborder="1" name="topIframe" width="100%" height="150px" scrolling="auto" ></iframe>
<iframe src="other/menu.html" height="480px" name="leftIframe" ></iframe>
<iframe src="http://www.baidu.com" name="rightIframe" height="480px" width="1570px"></iframe>
</body>
</html>
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>左菜单</title>
</head>
<body>
<ul>
<li><a href="sxtindex.html" target="rightIframe">学校介绍</a></li>
<li>师资力量</li>
<li>专业方向</li>
</ul>
</body>
</html>
这里尤其注意:name 和 target属性经常用到,两个属性需结合使用,name是当前位置的名称,target 指定将要显示的内容到什么位置。