9框架
一、浮动框架iframe简介
由于HTML5已经舍弃了frameset标签（框架集标签），所以在这一章，我们不讲解框架集frameset，只讲解一个标签：iframe标签（浮动框架标签）。
浮动框架是一种较为特殊的框架，它是在浏览器窗口中嵌套的子窗口，整个页面并不一定是框架页面，但要包含一个框架窗口。<iframe>框架可以完全由设计者定义宽度和高度，并且可以放置在一个网页的任何位置，这极大地扩展了框架页面的应用范围。
<frameset>生成的框架结构是依赖上级空间尺寸的，它的宽度或者高度必须有一个和上级框架相同。而<iframe>浮动框架可以完全由指定宽度和高度决定。
语法：
<iframe src="浮动框架的源文件" width="浮动框架的宽" height="浮动框架的高"></iframe>
说明：
src属性是iframe的必须属性，它定义浮动框架页面的源文件地址。
在普通框架结构中，由于框架就是整个浏览器的窗口，因此不需要设置其大小。但是在浮动框架中，框架是插入到普通HTML页面中，所以可以调整框架的大小。浮动框架的宽度和高度都是以像素为单位。width和height这2个都是可选属性。
举例：
|
1
2
3
4
5
6
7
8
9
10
11
12
|
<!DOCTYPE html> <head> <title></title></head><body> <div id="main"> <h3>绿叶学习网</h3> </div></body></html> |
在浏览器预览效果如下；
iframe标签
分析：
在这段代码中，设置了iframe的src属性值为“http://www.baidu.com”（百度首页地址），宽width为400px，高height为300px。
大家在浏览器查看到该页面嵌入了一个子页面，而这个子页面就是百度的首页。
二、设置浮动框架是否显示滚动条scrolling
对于浮动框架iframe的的滚动条，我们可以使用scrolling属性来控制。scrolling属性有3种情况：根据需要显示、总是显示和不显示。
语法：
<iframe src="浮动框架的源文件" width="浮动框架的宽" height="浮动框架的高" scrolling="取值"></iframe>
说明：
scrolling属性取值如下：
| scrolling属性值 | 说明 |
|---|---|
| auto | 默认值，整个表格在浏览器页面中左对齐 |
| yes | 总是显示滚动条，即使页面内容不足以撑满框架范围，滚动条的位置也预留 |
| no | 在任何情况下都不显示滚动条 |
举例：
|
1
2
3
4
5
6
7
8
9
10
11
12
|
<!DOCTYPE html> <head> <title></title></head><body> <div id="main"> <h3>绿叶学习网</h3> </div></body></html> |
在浏览器预览效果如下；
iframe标签
分析：
大家可以看到，浮动框架iframe的滚动条都消失了。大家可以在“在线测试工具”中修改一下scrolling属性值，看看不同属性值下有什么不同的效果。
浮动框架，说白了就是在一个页面嵌入一个或多个子页面，这样大家好理解了吧。
关于浮动框架iframe，我们要学习的属性就是以上几个了，这已经够用了，不多。很多朋友在看其他教程书籍的时候，还看到iframe有什么frameborder、marginwidth、marginheight等等的属性，搞得大家头都大了。在这里，我有必要跟大家说一下，这些属性我们完全没有必要去学习。因为这些属性都是用来设置元素的外观，而元素的外观我们完全可以用CSS来控制。
浙公网安备 33010602011771号