好得很程序员自学网

<tfoot draggable='sEl'></tfoot>

深入剖析HTML5 内联框架iFrame

由于现在fr am e和frameset很少使用,已经过时了,已经被div+CSS代替了,所以,这里只是举例说明一下,当下还在使用的内联框架iFrame

所谓的iFrame内联框架,我的理解就是在网页内部嵌套一个网页,并且可以一级一级地嵌套下去。

示例如下:

/*

示例由index.ht ML 和iframe1.html、iframe2.html、iframe3.html组成

*/

先上一张效果图,图片后面是完整代码。

点击后

完整代码如下

index.html

XM L/HTML Code 复制内容到剪贴板

<!DOCTY PE &nbs p; html >    < html   lang = "en" >    < head >         < meta   charset = "UTF-8" >         < t IT le > index </ title >    </ head >    <!--注意,这里没有body元素-->    index    < a   hr ef = "http://www.cn blog s .COM /czp2016/"   frameborder = "1" > czp_2016のb LOG </ a >    < br />    < iframe   src = "iframe1.html"   frameborder = "1"   width = "800px"   h ei ght = "800px" > </ iframe >    </ html >   

iframe1.html

XML/HTML Code 复制内容到剪贴板

<!DOCTYPE html >    < html   lang = "en" >    < head >         < meta   charset = "UTF-8" >         < title > iframe1 </ title >    </ head >    < body   bgcolor = " red " >    iFrame1    < a   href = "http://www.cnblogs.com/czp2016/"   frameborder = "1" > czp_2016のblog </ a >    < br />    < iframe   src = "iframe2.html"   frameborder = "0"   width = "600px"   height = "600px" > </ iframe >    </ body >    </ html >   

iframe2.html

XML/HTML Code 复制内容到剪贴板

<!DOCTYPE html >    < html   lang = "en" >    < head >         < meta   charset = "UTF-8" >         < title > iframe2 </ title >    </ head >    < body   bgcolor = "green" >    iFrame2    < a   href = "http://www.cnblogs.com/czp2016/"   frameborder = "1" > czp_2016のblog </ a >    < br   />    < iframe   src = "iframe3.html"   frameborder = "0"   width = "400px"   height = "400px" > </ iframe >    </ body >    </ html >   

iframe3.html

XML/HTML Code 复制内容到剪贴板

<!DOCTYPE html >    < html   lang = "en" >    < head >         < meta   charset = "UTF-8" >         < title > iframe3 </ title >    </ head >    < body   bgcolor = "yellow" >    iFrame3    < a   href = "http://www.cnblogs.com/czp2016/"   frameborder = "1" > czp_2016のblog </ a > </ body >    </ html >   

貌似各主流网站没有采用这种布局的,应用范围也比较少了。

以上这篇深入剖析HTML5 内联框架iFrame就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。

原文地址: http://www.cnblogs.com/czp2016/archive/2016/05/04/5450905.html

总结

以上是 为你收集整理的 深入剖析HTML5 内联框架iFrame 全部内容,希望文章能够帮你解决 深入剖析HTML5 内联框架iFrame 所遇到的问题。

如果觉得 网站内容还不错, 推荐好友。

查看更多关于深入剖析HTML5 内联框架iFrame的详细内容...

  阅读:18次