深入解析HTML5 内联框架--iFrame
导读:收集整理的这篇文章主要介绍了深入解析HTML5 内联框架--iFrame,觉得挺不错的,现在分享给大家,也给大家做个参考。下面小编就为大家带来一篇深入剖析HTML5 内联框架iFrame。希望对大家有所帮助。一起跟随小编过来看看吧,祝大家游...
收集整理的这篇文章主要介绍了深入解析HTML5 内联框架--iFrame,觉得挺不错的,现在分享给大家,也给大家做个参考。下面小编就为大家带来一篇深入剖析HTML5 内联框架iFrame。希望对大家有所帮助。一起跟随小编过来看看吧,祝大家游戏愉快哦由于现在frame和frameset很少使用,已经过时了,已经被p+CSS代替了,所以,这里只是举例说明一下,当下还在使用的内联框架iFrame
所谓的iFrame内联框架,我的理解就是在网页内部嵌套一个网页,并且可以一级一级地嵌套下去。
示例如下:
/*
示例由index.html和iframe1.html、iframe2.html、iframe3.html组成
*/
先上一张效果图,图片后面是完整代码。
点击后
完整代码如下
index.html
XML/HTML Code复制内容到剪贴板
!DOCTYPE html> html lang="en"> head> meta charset="UTF-8"> tITle> index/title> /head> !--注意,这里没有body元素--> index a href="www.cnblogs.COM/czp2016/" frameborder="1"> czp_2016のbLOG/a> br/> iframe src="iframe1.html" frameborder="1" width="800px" height="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="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="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="www.cnblogs.com/czp2016/" frameborder="1"> czp_2016のblog/a> /body> /html>
貌似各主流网站没有采用这种布局的,应用范围也比较少了。
【相关推荐】
1. 免费h5在线视频教程
2. HTML5 完整版手册
3. HTML5实战与剖析之延迟脚本
4. HTML5游戏框架cnGameJS开发实录-资源加载模块代码详解
5. HTML5实战与剖析之HTMLDocument变化
以上就是深入解析HTML5 内联框架--iFrame的详细内容,更多请关注其它相关文章!
声明:本文内容由网友自发贡献,本站不承担相应法律责任。对本内容有异议或投诉,请联系2913721942#qq.com核实处理,我们将尽快回复您,谢谢合作!
若转载请注明出处: 深入解析HTML5 内联框架--iFrame
本文地址: https://pptw.com/jishu/583270.html