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

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

示例如下：

/*

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

*/

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

点击后

完整代码如下

index.html

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>index</title>
 </head>
 <!--注意，这里没有body元素-->
 index
 <a href="http://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

 <!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

 <!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

 <!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>

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

知乎评论：

Iframe 有什么好处，有什么坏处？国内还有哪些知名网站仍用Iframe，为什么？有哪些原来用的现在抛弃了？又是为什么？

HTML5 内联框架iFrame的更多相关文章

  1. 前端学习 -- 内联框架iframe

    内联框架iframe 可以向一个页面中引入其他的外部页面 内联框架中的内容不会被搜索引擎所检索,所以开发中尽量不要使用内联框架 <iframe></iframe> 属性: sr ...

  2. [19/06/04-星期二] HTML基础_实体(转义字符)、图片标签(img)、元标签(meta)、语法规范、内联框架(iframe)、超链接

    一.实体(转义字符) 在HTML中,一些诸如<.> 就是普通的小于号和大于号不能直接使用,因为浏览可能会把它当成一个标签去解析,所以需要一些特殊字符去表示这些特殊字符, 这些字符我们称他们 ...

  3. HTML的内联框架(iframe)

    HTML的内联框架(iframe) 第一种:打开网页就是带内联框架的页面 可以实现在自己的网页内部,打开另一个网页 语法: <!--src:地址frameborder:0为无边框:1为有边框-- ...

  4. 第48天学习打卡（HTML 行内元素和块元素 列表 表格 视频和音频 页面结构分析 iframe内联框架 表单语法 ）

    行内元素和块元素 块元素 ​ 无论内容多少,该元素独占一行 ​ (p.h1-h6) 行内元素 ​ 内容撑开宽度,左右都是行内元素的可以排在一行 ​ (a.strong.em...) 列表 什么是列表 ...

  5. __x__(14)0906第三天__<iframe> 内联框架 引入有一个外部html页面

    在现实开发中,不推荐使用内联框架,因为<iframe></iframe>中的内容不会被搜索引擎检索. 在特殊情况中,如内网项目,不用放在互联网上时,可以使用<iframe ...

  6. 计算机网络之iframe内联框架跨域

    iframe框架同源下的数据调用 iframe框架非同源下的数据传输 一.iframe框架同源下的数据调用 1.父窗口向子窗口获取数据 //html1父级窗口 <iframe src=" ...

  7. Iframe内联框架

    iframe:内联框架标签,用于在网页中任意的位置嵌入另一个网页 <iframe src="url地址"> </iframe> iframe标签的常用属性 ...

  8. 重写iframe内联框架中的内容

    重写iframe内联框架中的内容,不使用src指向页面url,主动写入HTML代码: var ifr = document.getElementById("CMBC-certificatio ...

  9. html5--1.16 内联框架

    html5--1.16 内联框架 学习要点: 1.iframe内联框架2.综合实例1 1.iframe内联框架 1.iframe元素用来在文档中添加一个内联框架. 2.iframe为body元素的子元 ...

随机推荐

  1. C#_Jquery无刷新上传

    昨晚网友有下载了一个jQuery无刷新上传的小功能,他尝试搬至ASP.NET MVC应用程序中去,在上传死活无效果.Insus.NET使用Teamviewer远程桌面,操作一下,果真是有问题.网友是说 ...

  2. SQLServer 之 2008还原的时候无法获得对数据库的独占访问权解决

    SQL2008还原的时候无法获得对数据库的独占访问权解决 还原或删除sql server 2008数据库时,经常会出现: “因为数据库正在使用,所以无法获得对数据库的独占访问权”,终解决方案如下 // ...

  3. Android自定义View，高仿QQ音乐歌词滚动控件！

    最近在以QQ音乐为样板做一个手机音乐播放器,源码下篇博文放出.今天我想聊的是这个QQ音乐播放器中歌词显示控件的问题,和小伙伴们一起来探讨怎么实现这个歌词滚动的效果.OK,废话不多说,先来看看效果图: ...

  4. C++/CLR Sqlite初探

        error C2491: "acosh": 不允许 dllimport 函数 的定义     asinh": 不允许 dllimport 函数 的定义     a ...

  5. android-ramdisk.img分析、recovery.img&boot.img执行过程

    转载请注明来源:cuixiaolei的技术博客 一.ramdisk介绍 ramdisk通过直面意思就大概能理解意思,ram disk虚拟内存盘,将ram模拟成硬盘来使用的文件系统.对于传统的磁盘文件系 ...

  6. 移动互联网(APP)产品设计的经验分享【转】

    随着移动互联网的发展,越来越多的Web产品开始布局移动端,因此最近经常碰到PM们在交流讨论移动APP产品的设计.我从事移动互联网已经有一年多了,通过不断的学习和实践也积累了一些心得,今天整理并分享一下 ...

  7. generated key...

    1. javax.persistence.GeneratedValue @Data @MappedSuperclass public abstract class UUIDEntity { @Id @ ...

  8. 转: 基于nginx的hls直播系统

    转自:http://blog.csdn.net/cjsafty/article/details/9108587 看点: 1. 详细解解答了 nginx rtmp配置过程. 前写了一篇基于nginx的h ...

  9. 谈在一个将TXT按章节分割的PHP程序中的收获

    最近在做一个自动分割txt小说的东西,能够将一整个txt文件按照章节进行分割,然后分解成一个个小的.txt文件保存起来并且能够获取有多少章节和每章的章节名. 我最初的想法是: ① 先使用fopen打开 ...

  10. VSX规划Package文件

    VSX是VS扩展,可以针对不同项目编写插件,虽然接触VSX的时间并不多,但是当了解VSX后深刻感受到VSX的魅力. VSX的材料比较少,配置文件也很繁琐,当初我也走了不少弯路. 这篇文章将帮助您更好的 ...