内嵌框架Iframe的应用
- 内嵌框架的整体概述
- 内联框架的入门用法
- 添加 iframe 的语法
- Iframe - 设置高度和宽度
- Iframe - 删除边框
- 使用 iframe 作为链接的目标
- 内联框架的各种类型及实例
- 整个页面作为内联框架
- 简单的内联框架
- 利用表格，添加内联框架
- 表格化的内联框架
- 整个页面直接分块
- 导航栏类的内联框架
- 总结
内嵌框架的整体概述
内嵌框架，整体来说就是将整个页面进行了结构划分，在点击一个src或者url时，可以在某个特定的位置跳转页面。（简单来说就是常见的左边导航栏，右边不同的页面跳转栏，这种很常见）
具体一个例子见下图（这里选取w3 school的例子）
内联框架的入门用法
添加 iframe 的语法
<iframe src="URL"></iframe>
url指向跳转页面的位置
Iframe - 设置高度和宽度
<iframe src="demo_iframe.htm" width="200" height="200"></iframe>
Iframe - 删除边框
<iframe src="demo_iframe.htm" frameborder="0"></iframe>
frameborder 属性规定是否显示 iframe 周围的边框。设置属性值为 “0” 就可以移除边框：
使用 iframe 作为链接的目标
iframe 可用作链接的目标（target）。链接的 target 属性必须引用 iframe 的 name 属性：
<iframe src="demo_iframe.htm" name="iframe_a"></iframe>
<p><a href="http://www.w3school.com.cn" target="iframe_a">W3School.com.cn</a></p>
内联框架的各种类型及实例
整个页面作为内联框架
这种类型的话就相当于是跳转url，只不过是跳转url页面时，类似于将target属性值设置为“_blank”。
简单的内联框架
<body>
<p>这是一个内嵌框架应用示例。</p>
<p>正常联网时，你在当前页面的小窗口里会看到搜狐网的主页面。</p>
<p>点击这里的链接文字<a href="https://y.qq.com/n/ryqq/index.html" target="music">QQ音乐</a>，小窗口里换成了QQ音乐主页面。</p>
<iframe src="http://www.sohu.com/" name="music" width="980" height="800" ></iframe>
</body>
这里看到，这是一个最简单的内联框架，只是让你更好的了解内联框架的结构
利用表格，添加内联框架
例如一个表格（见下图）
点击不同的搜索栏，旁边就会显示新的目标页面。
表格化的内联框架
<body>
<table width="800" border="1" align="center" >
<tr width="150" height="100">
<td width="150" height="50" align="center"><a href="http://www.baidu.com/" target="test">百度</a></td>
<td width="600" height="400" rowspan="4">
<iframe src="" width="100%" height="100%" name="test"></iframe>
</tr>
<tr>
<td height="50" align="center"><a href="http://www.sohu.com/" target="test">搜狐 </a></td>
</tr>
<tr>
<td height="50" align="center"><a href="http://www.sina.com.cn/" target="test">新浪</a></td>
</tr>
</table>
这里可以看到，此处是将内联框架放到了表格内部，参考照片见下图
整个页面直接分块
这里用到的较少，暂不详介。
导航栏类的内联框架
这块部分其实和表格做内联框架有相似之处，只是添加了不少的修饰东西，并且没有了表格的那种约束感（例如最开始提到的w3 school的导航栏）
<table style="width:980px;" border="1" cellspacing="0">
<tr>
<td>
<table style="width:200px; border:1px solid #000000;" cellpadding="3">
<tr>
<td><a href="http://www.qdhdworld.com/" target="test">旅游模块——海底世界</a></td>
</tr>
<tr>
<td>
<span style="font-size:12px;">*参加旅行社注意事项<br>
*旅游保险常识</span>
</td>
</tr>
<tr>
<td><a href="http://tsgw.taian.gov.cn/" target="test">旅游景点</a></td>
</tr>
<tr>
<td>
<span style="font-size:12px;">*广场/建筑<br>
*纪念展览馆<br>
*游乐场<br>
*游泳馆</span></td>
</tr>
<tr>
<td><a href="http://vacations.ctrip.com/?isctrip=T&ouid=vacation" target="test">旅游图库</a></td>
</tr>
<tr>
<td>
<span style="font-size:12px;">***<br>
***<br>
***</span>
</td>
</tr>
</table>
</td>
<td rowspan="3" style="width:780px; height:300px;">
<iframe src="http://www.qdhdworld.com/" name="test" width="100%" height="100%"></iframe>
</td>
</tr>
</table>
具体效果详见下图
总结
iframe内联框架的有效使用，可以使得所做的网页更加美观且有层次，感兴趣得小伙伴赶快试试吧.
