站长资源网页制作 HTML iframe和frameset的区别_动力节点Java学院整理 整理:jimmy2024/12/23浏览2次 站长资源 网页制作 网盘链接 云盘下载 简介简介1. 标签：iframe 是个内联框架，是在页面里生成个内部框架。2.<frameset> 标签：frameset定义一个框架集，包含多个子框架，每个框架都有独立的文档。<iframe> 标签iframe 是个内联框架，是在页面里生成个内部框架。<iframe></if</div> <div class="news_infos"><div id="MyContent"><p><strong>简介</strong></p> <p>1.<iframe> 标签：iframe 是个内联框架，是在页面里生成个内部框架。</p> <p>2.<frameset> 标签：frameset定义一个框架集，包含多个子框架，每个框架都有独立的文档。</p> <p><strong><iframe> 标签</strong></p> <p>iframe 是个内联框架，是在页面里生成个内部框架。</p> <p><iframe></iframe></p> <p><strong>属性</strong></p> <p>frameborder{int}：是否显示框架的边框；</p> <p>src{URL}：指定一个资源(如网页、图片)的uri；</p> <p>scrolling{boolean}：是否显示框架的滚动条；</p> <p>width{int}：定义iframe的宽度；</p> <p>height{int}：定义iframe的高度；</p> <p><strong>示例</strong></p> <div class="htmlcode"> <pre class="brush:xhtml;"> <body> <h3>HTML标签演示</h3> <iframe src=1.1-ShowHtml.htm ></iframe> </body></pre> </div> <p><a href="javascript:;" onclick="showimg('/UploadFiles/2021-03-30/2017619104550890.jpg?201751910463');"><img src="/UploadFiles/2021-03-30/2017619104550890.jpg?201751910463" alt="HTML iframe和frameset的区别_动力节点Java学院整理" onmousewheel="return bbimg(this)" onload="javascript:resizepic(this)" border="0"/></a></p> <p><strong>注意事项</strong></p> <p>在 "<iframe>我是内容</iframe>" 内添加内容时，在展示页面不会显示添加的内容。所以还是使用src属性指定一个页面吧。</p> <p><strong>应用场景</strong></p> <p>1) 版本升级页面，版本日志过多，可以把升级的信息放到一个iframe里。</p> <p>2) 富文本编辑框，如博客园的【新建随笔】区域。</p> <p><strong><frameset> 标签</strong></p> <p>frameset定义一个框架集，包含多个框架，每个框架都有独立的文档。</p> <p><strong>格式</strong></p> <div class="htmlcode"> <pre class="brush:xhtml;"> <frameset > <frame src=a.htm /> <frame src=b.htm /> <noframes></noframes> </frameset> </pre> </div> <p><strong>子项说明</strong></p> <p><framesrc=a.htm /> ：子框架 <noframes></noframes>：浏览器不支持此框架的时，显示的内容。</p> <p><strong>属性</strong></p> <p><strong>frameset属性：</strong></p> <p> rows：表示子框架按行的样式布局（<a href="javascript:;" onclick="showimg('/UploadFiles/2021-03-30/2017619104632410.jpg?201751910472');"><img src="/UploadFiles/2021-03-30/2017619104632410.jpg?201751910472" alt="HTML iframe和frameset的区别_动力节点Java学院整理" onmousewheel="return bbimg(this)" onload="javascript:resizepic(this)" border="0"/></a>）。以2个子框架为例：rows="30%,*" ，表示第一个框架占整个页面30%的高度，第二个占剩下的； cols：表示子框架按列的样式布局(<a href="javascript:;" onclick="showimg('//img.jbzj.com/file_images/article/201706/2017619104731577.jpg?2017519104742');"><img src="//img.jbzj.com/file_images/article/201706/2017619104731577.jpg?2017519104742" alt="HTML iframe和frameset的区别_动力节点Java学院整理" onmousewheel="return bbimg(this)" onload="javascript:resizepic(this)" border="0"/></a>)。以2个子框架为例：cols="30%,*" ，表示第一个框架占整个页面30%的长度，第二个占剩下的； noresize="noresize" ：表示不调整子框架的范围。</p> <p><strong>frame属性：</strong></p> <p> src：指向一个资源(如页面、图片等)的URI；</p> <p> name：指定框架的名称，以便进行框架间的操作。</p> <p><strong>示例</strong></p> <div class="htmlcode"> <pre class="brush:xhtml;"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>frameset 演示</title> </head> <frameset rows="30%,*" noresize="noresize"> <frame src=DateGrid.htm name="frm1" /> <frame src=Dialog.htm name="frm2"/> <noframes></noframes> </frameset> </html> </pre> </div> <p><strong>注意事项</strong></p> <p>使用frameset标签时，注意要去掉外层的<body></body>标签。</p> <p><strong>子框架间的操作</strong></p> <p>参照示例代码，frm1更改frm2的子集指向的页面：<code>window.parent.frames["frm2"].location.href = 'b.htm'</code></p> <p>应用场景</p> <p>1) 后台页面的管理，左边显示 菜单，右边框架 显示详细页面。</p> <p>2) 功能菜单页面，如bbs.csdn.net</p> <p><strong>小知识</strong></p> <p> 浏览页面中的框架时，在框架页面内 点击右键，会多出框架的信息。</p> <p>以chrome为例：</p> <p><a href="javascript:;" onclick="showimg('/UploadFiles/2021-03-30/2017619104304079.jpg?2017519104318');"><img src="/UploadFiles/2021-03-30/2017619104304079.jpg?2017519104318" alt="HTML iframe和frameset的区别_动力节点Java学院整理" onmousewheel="return bbimg(this)" onload="javascript:resizepic(this)" border="0"/></a></p></div> </div> </div> <div class="share"> </div> <div class="nextinfo"> <p>上一篇：<a href="http://m.bwabc.com/show/1/68408.html" title="HTML DOM简介_动力节点Java学院整理">HTML DOM简介_动力节点Java学院整理</a></p> <p>下一篇：<a href="http://m.bwabc.com/show/1/68410.html" title="HTML表单_动力节点Java学院整理">HTML表单_动力节点Java学院整理</a></p> </div> <div class="otherlink"> <h2>最新资源</h2> <ul> <li><a href="/show/1/622578.html" title="群星《奔赴！万人现场 第2期》[FLAC/分轨]">群星《奔赴！万人现场 第2期》[FLAC/分轨]</a></li> <li><a href="/show/1/622577.html" title="群星《奇妙浪一夏 (上海迪士尼度假区音乐">群星《奇妙浪一夏 (上海迪士尼度假区音乐</a></li> <li><a href="/show/1/622576.html" title="群星《奇妙浪一夏 (上海迪士尼度假区音乐">群星《奇妙浪一夏 (上海迪士尼度假区音乐</a></li> <li><a href="/show/1/622575.html" title="【古典音乐】詹姆斯·高威《季节》1993[WA">【古典音乐】詹姆斯·高威《季节》1993[WA</a></li> <li><a href="/show/1/622574.html" title="贝拉芳蒂《卡里普索之王》SACD[WAV+CUE]">贝拉芳蒂《卡里普索之王》SACD[WAV+CUE]</a></li> <li><a href="/show/1/622573.html" title="小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE">小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE</a></li> <li><a href="/show/1/622572.html" title="群星《欢迎来到我身边 电影原声专辑》[32">群星《欢迎来到我身边 电影原声专辑》[32</a></li> <li><a href="/show/1/622571.html" title="群星《欢迎来到我身边 电影原声专辑》[FL">群星《欢迎来到我身边 电影原声专辑》[FL</a></li> <li><a href="/show/1/622570.html" title="雷婷《梦里蓝天HQⅡ》 2023头版限量编号低">雷婷《梦里蓝天HQⅡ》 2023头版限量编号低</a></li> <li><a href="/show/1/622569.html" title="群星《2024好听新歌42》AI调整音效【WAV分">群星《2024好听新歌42》AI调整音效【WAV分</a></li> </ul> </div> </div> <div class="sidebar"> <div class="cloud"><h2 class="hometitle">标签云</h2><ul><a href="/search.asp?key=1080P高清&m=1">1080P高清<span>(5)</span></a><a href="/search.asp?key=高清电影&m=1">高清电影<span>(5)</span></a><a href="/search.asp?key=百度云盘&m=1">百度云盘<span>(5)</span></a><a href="/search.asp?key=网盘下载&m=1">网盘下载<span>(4)</span></a><a href="/search.asp?key=破解软件&m=1">破解软件<span>(4)</span></a><a href="/search.asp?key=绿色软件&m=1">绿色软件<span>(4)</span></a><a href="/search.asp?key=磁力链接&m=1">磁力链接<span>(3)</span></a><a href="/search.asp?key=强度天梯&m=1">强度天梯<span>(3)</span></a><a href="/search.asp?key=福利资源&m=1">福利资源<span>(2)</span></a><a href="/search.asp?key=王者荣耀&m=1">王者荣耀<span>(2)</span></a><a href="/search.asp?key=黑钻活动&m=1">黑钻活动<span>(2)</span></a><a href="/search.asp?key=WPS会员&m=1">WPS会员<span>(2)</span></a><a href="/search.asp?key=刷图排行&m=1">刷图排行<span>(1)</span></a><a href="/search.asp?key=网盘限速&m=1">网盘限速<span>(1)</span></a><a href="/search.asp?key=鬼灭之刃&m=1">鬼灭之刃<span>(1)</span></a><a href="/search.asp?key=免费韩国漫画&m=1">免费韩国漫画<span>(1)</span></a><a href="/search.asp?key=宫本重做&m=1">宫本重做<span>(1)</span></a><a href="/search.asp?key=免费动漫&m=1">免费动漫<span>(1)</span></a></ul></div> </div> </article> <footer> <p>友情链接:<a href="http://www.imxmx.com/" title="杰晶网络" target="_blank">杰晶网络</a> <a href="http://www.ddrfans.com/" title="DDR爱好者之家" target="_blank">DDR爱好者之家</a> <a href="http://www.nqxw.com/" title="南强小屋" target="_blank">南强小屋</a> <a href="http://www.paidiu.com/" title="黑松山资源网" target="_blank">黑松山资源网</a> <a href="http://www.dyhadc.com/" title="白云城资源网" target="_blank">白云城资源网</a> <a href="/sitemap.xml">SiteMap</a></p> <p>Design by <a href="http://m.bwabc.com">凤求凰客栈</a> <a href="/">http://m.bwabc.com</a></p> </footer> <script src="/images/nav.js"></script> <script type="text/javascript"> jQuery.noConflict(); jQuery(function() { var elm = jQuery('#left_flow2'); var startPos = jQuery(elm).offset().top; jQuery.event.add(window, "scroll", function() { var p = jQuery(window).scrollTop(); jQuery(elm).css('position', ((p) > startPos) ? 'fixed' : ''); jQuery(elm).css('top', ((p) > startPos) ? '0' : ''); }); }); </script> </body> </html>