文章目录

@[toc]

HTML框架框架简介整体框架整体结构标签《frameset》代码示例代码详解

框架标签《frame》frame属性代码示例

局部框架iframe属性

frame与iframe区别

HTML框架

框架简介

通过使用框架,你可以在同一个浏览器窗口中显示不止一个页面。每份HTML文档称为一个框架,并且每个框架都独立于其他的框架。 使用框架的坏处:

开发人员必须同时跟踪更多的HTML文档很难打印整张页面

整体框架

整体结构标签《frameset》

将浏览器整个界面分割成多个的界面,与一起使用每一个frameset相当于一个大体框架,包含很多个frame。而每一个frame将相当于一个简单的界面;frameset的基本属性包括:分行rows=“”和分列cols=“”

代码示例

代码详解

border 设置框架的边框粗细。bordercolor 设置框架的边框颜色。frameborder 设置是否显示框架边框。设定值只有0、1; 0 表示不要边框,1 表示要显示边框。cols 纵向分割页面。其数值表示方法有三种:“30%、30(或者30px)、* ”;数值的个数代表分成的视窗数目且数值之间用“,”隔开。“30%”表示该框 架区域占全部浏览器页面区域的30%;“30”表示该区域横向宽度为30像素;“*”表示该区域占用余下页面空间。例 如:cols="25%,200,* " 表示将页面分为三部分,左面部分占页面30%,中间横向宽度为200像素,页面余下的作为右面部分。rows 横向分割页面。数值表示方法与意义与cols相同。framespacing 设置框架与框架间的保留的空白距离。

重要事项

不能在标签里使用 标签。不过,如果需要为不支持框架的浏览器添加一个 标签,请务必将此标签放置在 <body></body> 标签中!</p> <p>框架标签《frame》</p> <p>frame属性</p> <p>frame是<frameset>中的一个特定的窗口frame>不能放在body里,否则无法正常显示;frame的高度只能通过frameset控制Frame所包含的内容是一个独立的个体,是可以独立显示的</p> <p>代码示例</p> <p><frameset></p> <p><iframe name="frame1" src="test1.htm"/></p> <p><iframe name="frame2" src="test2.htm"/></p> <p></frameset></p> <p>局部框架</p> <p>iframe属性</p> <p>iframe可以脱离frameset随意使用,也可嵌套在frameset里使用,不过嵌套在frameset里需要放置在body中。iframe可以自己任意控制高度、宽度等;</p> <p>属性描述width定义iframe宽度height定义iframe高度frameborder是否显示框架周围的边框(值为1时显示,0则不显示)scroling规定在iframe里是否显示滚动条(值:yes、no、auto)src在iframe里显示链接的文档或网页srcdoc在iframe中显示html内容</p> <p>代码示例: (代码引用自W3school) scrolling属性、srcdoc属性</p> <p><html></p> <p><body></p> <p><h3>iframe 中始终显示滚动条:</h3></p> <p><iframe src ="https://www.baidu.com" width="200" height="200"</p> <p>scrolling="yes"></p> <p><p>Your browser does not support iframes.</p></p> <p></iframe></p> <p><h3>iframe 中从不显示滚动条:</h3></p> <p><iframe src ="https://www.baidu.com" width="200" height="200"</p> <p>scrolling="no"></p> <p><p>Your browser does not support iframes.</p></p> <p></iframe></p> <p><h3>iframe srcdoc属性:</h3></p> <p><iframe srcdoc="<p>Hello world!</p>"</p> <p>src="/demo/demo_iframe_srcdoc.html"></p> <p><p>Your browser does not support iframes.</p></p> <p></iframe></p> <p></body></p> <p></html></p> <p>运行效果</p> <p>frame与iframe区别</p> <p>Frame与Iframe两者可以实现的功能基本相同,不过Iframe比Frame具有更多的灵活性。 frame是整个页面的框架,iframe是内嵌的网页元素,也可以说是内嵌的框架Iframe标记又叫浮动帧标记,可以用它将一个HTML文档嵌入在另一个HTML中显示。它和Frame标记的最大区别是在网页中嵌入的<Iframe></Iframe>所包含的内容与整个页面是一个整体,而<Frame></Frame>所包含的内容是一个独立的个体,是可以独立显示的。另外,应用Iframe还可以在同一个页面中多次显示同一内容,而不必重复这段内容的代码。frame必须在frameset里 而frameset不能与body元素共存,也就说有frameset元素的文档只能是一个框架集。而iframe可以脱离frameset随意使用,也可嵌套在frameset里使用,不过嵌套在frameset里需要放置在body中。frame是框架,由多个并列的网页构成 ,是固定的。只能四个方向上的。而iframe是内嵌的,比较灵活。但是因为灵活就会出现在不同的浏览器和分辨率下,页面布局会被打乱而影响网页整体观感。<frame>用来把页面横着或竖着切开, <iframe>用来在页面中插入一个矩形的小窗口 <frame>用于全页面 <iframe>只用于局部Frame用来控制页面格式,比如一本书,左边是章节目录,右边是正文,正文很长,看的时候要拖动,但又不想目录也被拖动得开不到了.因此最好将页面用Frame分成规则的2页,一左一右. 而iframe则更灵活,不要求将整个页面划分,你可以在页面任何地方用iframe嵌入新的页面.</p> </div> <div class="article-tags"> </div> </div> <div class="article-nav"> <div class="article-nav-entry"> <a class="entry-page-prev" href="/fe68589c4af901f7/a06fd129eabf4ea5.html"> <div class="entry-page-icon"><i class="iconfont icon-arrow-left"></i></div> <div class="entry-page-info"> <span class="hnav">上一篇</span></div> </a> </div> <div class="article-nav-entry"> <a class="entry-page-next" href="/2ec84f4e09554f71/cf1b1c477d813d0d.html"> <div class="entry-page-info"> <span class="hnav">下一篇</span></div> <div class="entry-page-icon"><i class="iconfont icon-arrow-right"></i></div> </a> </div> </div> <div class="right-list"> <div class="w-newsitem"> <h3>相关文章</h3> </div> <div class="article-relevant"> <ul> <li><a href="/fe68589c4af901f7/8e7ef7328538294a.html" target="_blank">刘烨溦巡演1688元天价“路费支持票”,十倍票价宠粉还是割韭菜?_手机网易网</a></li> <li><a href="/dfb4b9d561418723/76e94221be07c3ec.html" target="_blank">以下为 《九尾狐每条尾巴有什么能力》 的相关文章</a></li> <li><a href="/fe68589c4af901f7/eeb11e2b81ddd68e.html" target="_blank">西部数据160G/8M/SATA2/蓝盘</a></li> <li><a href="/2ec84f4e09554f71/67a5bffe531f6ef0.html" target="_blank">哪个星座男生最配巨蟹座?揭秘最佳星座组合!</a></li> <li><a href="/2ec84f4e09554f71/6e6edeaedf6a0af5.html" target="_blank">我在B站当“老公”</a></li> <li><a href="/fe68589c4af901f7/b711a90c60fbfa88.html" target="_blank">暗黑3 24赛季冰吞150首通视频及心得分享</a></li> <li><a href="/dfb4b9d561418723/196af0f999af3779.html" target="_blank">现在手机用什么浏览器比较好,以前都是用UC,现在感觉UC很不好,内容旧?广告多?</a></li> <li><a href="/dfb4b9d561418723/5621fea859d6dd98.html" target="_blank">Windows-端口状态含义</a></li> <li><a href="/2ec84f4e09554f71/ec8fe89542914a7a.html" target="_blank">公务行app下载-公务行app官方版 V4.0.6</a></li> <li><a href="/fe68589c4af901f7/9f564691c30b1222.html" target="_blank">安贷客上班怎么样,想找家公司贷款看到安贷客上面有好多小额贷款公司不知道怎么样</a></li> </ul> </div> </div> </div> <div class="abconright aside"> <div class="right-list"> <div class="w-newsitem"> <h3>热门</h3> </div> <ul class="hot-item"> <li><span class="badge color1">1</span><a title="2024多用户商城系统选型指南及国内多商户商城系统对比" href="/fe68589c4af901f7/7e32577d7cd711ea.html" target="_blank">2024多用户商城系统选型指南及国内多商户商城系统对比</a></li> <li><span class="badge color2">2</span><a title="计算机网络的作用" href="/2ec84f4e09554f71/32c69fd48b20b8e6.html" target="_blank">计算机网络的作用</a></li> <li><span class="badge color3">3</span><a title="还原已删除日记" href="/dfb4b9d561418723/a4b3a59fa1e4e2bd.html" target="_blank">还原已删除日记</a></li> <li><span class="badge color4">4</span><a title="铭文回声,揭秘哪个英雄最适合携带,助力上分利器!" href="/2ec84f4e09554f71/57146af4e15e14ab.html" target="_blank">铭文回声,揭秘哪个英雄最适合携带,助力上分利器!</a></li> <li><span class="badge color5">5</span><a title="游戏厅有哪些好玩的游戏机?常见的电玩游戏机介绍!" href="/dfb4b9d561418723/77471afc585d336f.html" target="_blank">游戏厅有哪些好玩的游戏机?常见的电玩游戏机介绍!</a></li> </ul> </div> <div class="right-list"> <div class="w-newsitem"> <h3>推荐</h3> </div> <ul class="list-grid"> <li> <div class="item-img"> <a href="/fe68589c4af901f7/178e74e7d5c107d2.html" title="altium怎么锁定_在AD软件中的锁定与解锁命令应该如何使用?"> <img width="480" height="400" src="/0.jpg" alt="altium怎么锁定_在AD软件中的锁定与解锁命令应该如何使用?"> </a></div> <div class="item-content"> <p class="item-title"><a href="/fe68589c4af901f7/178e74e7d5c107d2.html" title="altium怎么锁定_在AD软件中的锁定与解锁命令应该如何使用?">altium怎么锁定_在AD软件中的锁定与解锁命令应该如何使用?</a></p> <p class="item-date"><i class="iconfont icon-shijian"></i>2025-05-21</p> </div> </li> <li> <div class="item-img"> <a href="/fe68589c4af901f7/8346848968a56f73.html" title="网络不稳定是网线的问题吗 网络不稳定原因分析与解决方法"> <img width="480" height="400" src="/0.jpg" alt="网络不稳定是网线的问题吗 网络不稳定原因分析与解决方法"> </a></div> <div class="item-content"> <p class="item-title"><a href="/fe68589c4af901f7/8346848968a56f73.html" title="网络不稳定是网线的问题吗 网络不稳定原因分析与解决方法">网络不稳定是网线的问题吗 网络不稳定原因分析与解决方法</a></p> <p class="item-date"><i class="iconfont icon-shijian"></i>2025-08-10</p> </div> </li> <li> <div class="item-img"> <a href="/dfb4b9d561418723/23c7f2675120a45b.html" title="好啊!除了 YES 和 OK 还可以怎么说?"> <img width="480" height="400" src="/0.jpg" alt="好啊!除了 YES 和 OK 还可以怎么说?"> </a></div> <div class="item-content"> <p class="item-title"><a href="/dfb4b9d561418723/23c7f2675120a45b.html" title="好啊!除了 YES 和 OK 还可以怎么说?">好啊!除了 YES 和 OK 还可以怎么说?</a></p> <p class="item-date"><i class="iconfont icon-shijian"></i>2025-11-02</p> </div> </li> <li> <div class="item-img"> <a href="/dfb4b9d561418723/025bda0d231867a6.html" title="关于结婚的网站"> <img width="480" height="400" src="/0.jpg" alt="关于结婚的网站"> </a></div> <div class="item-content"> <p class="item-title"><a href="/dfb4b9d561418723/025bda0d231867a6.html" title="关于结婚的网站">关于结婚的网站</a></p> <p class="item-date"><i class="iconfont icon-shijian"></i>2025-10-13</p> </div> </li> <li> <div class="item-img"> <a href="/dfb4b9d561418723/a929d35506e2ebc5.html" title="10部经典好看的霸道总裁剧 最火的霸道总裁甜宠剧推荐→MAIGOO生活榜"> <img width="480" height="400" src="/0.jpg" alt="10部经典好看的霸道总裁剧 最火的霸道总裁甜宠剧推荐→MAIGOO生活榜"> </a></div> <div class="item-content"> <p class="item-title"><a href="/dfb4b9d561418723/a929d35506e2ebc5.html" title="10部经典好看的霸道总裁剧 最火的霸道总裁甜宠剧推荐→MAIGOO生活榜">10部经典好看的霸道总裁剧 最火的霸道总裁甜宠剧推荐→MAIGOO生活榜</a></p> <p class="item-date"><i class="iconfont icon-shijian"></i>2025-05-21</p> </div> </li> </ul> </div> <div class="right-list"> <div class="w-newsitem"> <h3>随机</h3> </div> <ul class="hot-item"> <li><a title="将QQ空间视频存在手机,简单几步即可" href="/fe68589c4af901f7/2f6a803d9e25d0db.html" target="_blank">将QQ空间视频存在手机,简单几步即可</a></li> <li><a title="lol回放已失效怎么办 lol回放失效解决方法" href="/dfb4b9d561418723/2a4d438f199c52b7.html" target="_blank">lol回放已失效怎么办 lol回放失效解决方法</a></li> <li><a title="鞋子代理怎么做? 如何做鞋子代理?" href="/dfb4b9d561418723/2546d45235c08778.html" target="_blank">鞋子代理怎么做? 如何做鞋子代理?</a></li> <li><a title="资讯详情页" href="/dfb4b9d561418723/a9914272f27a9286.html" target="_blank">资讯详情页</a></li> <li><a title="手机游戏卡顿怎么办?全面攻略助你网络优化与性能提升" href="/dfb4b9d561418723/9162bda0a41a1e17.html" target="_blank">手机游戏卡顿怎么办?全面攻略助你网络优化与性能提升</a></li> </ul> </div> <div class="right-list-ad"> </div> </div> </div> </div> <div class="footer"> <div class="container"> <div class="copyright-footer"> <p>Copyright © 2033 国足进世界杯_2026世界杯名额 - jiage168.com</p> </div> </div> </div> <div class="rollbar" id="goto-top"><i class="iconfont icon-xiangshang"></i></div> <script type='text/javascript' src='/kjzs/js/jquery-2.2.4.min.js' id='jquery-js'></script> <script type='text/javascript' src='/kjzs/js/common.js' id='com-js'></script> <script type='text/javascript' src='/kjzs/js/js.js'></script> <script type='text/javascript' src='/kjzs/js/wechattopbar.js'></script> <script type='text/javascript' src='/tongji.js'></script> <div class="m-mask"></div> <div class="links"> <div class="links-footer container"> <span>友情链接:</span> <html> <head><title>404 Not Found</title></head> <body> <center><h1>404 Not Found</h1></center> <hr><center>nginx</center> </body> </html> </div> </div> </body> </html>