html iframe用法编程频道|福州电脑网

2024年4月18日发(作者：)

html iframe用法

iframe标签是HTML4.0中出现的一种新的标签，用来在当前页

面或者其它页面中嵌入其他文档的内容，使用iframe可以实现一个

页面同时在一页中展示多个文档页面。

实现iframe标签的基本语法如下：

<p style="text-indent: 2em;font-size:18px;"> 从语法可以看出，iframe标签必须要有src属性，该src属性</p><p style="text-indent: 2em;font-size:18px;">指定了要嵌入的页面的链接，这个链接可以是本地文件，也可以是网</p><p style="text-indent: 2em;font-size:18px;">络上的文件，如果文件在网络上，那么它的完整链接需要包含相应的</p><p style="text-indent: 2em;font-size:18px;">网络协议，一般都是或者。 </p><p style="text-indent: 2em;font-size:18px;"> 一旦iframe标签的src属性被设置，就可以在当前页面中嵌入</p><p style="text-indent: 2em;font-size:18px;">这个页面的内容，并且它还可以设置一些其他参数，比如width，</p><p style="text-indent: 2em;font-size:18px;">height，控制嵌入的页面的宽度和高度，还可以控制页面的滚动条是</p><p style="text-indent: 2em;font-size:18px;">否出现，iframe标签的参数配置如下： </p><p style="text-indent: 2em;font-size:18px;"> <iframe src=要嵌入的页面链接 width=页面宽度 height=页面</p><p style="text-indent: 2em;font-size:18px;">高度 frameborder=是否显示边框 scrolling=是否出现滚动条 /> </p><p style="text-indent: 2em;font-size:18px;"> width和height表示嵌入页面的宽度和高度，它们可以是任意</p><p style="text-indent: 2em;font-size:18px;">数字，表示以像素为单位的宽度和高度；frameborder表示是否显示</p><p style="text-indent: 2em;font-size:18px;">边框，可以是1或者0，分别表示显示和不显示；scrolling表示是</p><p style="text-indent: 2em;font-size:18px;">否出现滚动条，可以是yes或者no，分别表示出现和不出现。 </p><p style="text-indent: 2em;font-size:18px;"> iframe标签的应用也非常广泛，它可以用来嵌入其他网页的外</p><p style="text-indent: 2em;font-size:18px;">部文档，也可以用来嵌入多种文件，比如音频文件、视频文件等，以</p><p style="text-indent: 2em;font-size:18px;"> - 1 - </p><p style="text-indent: 2em;font-size:18px;">实现一个网页同时包含多个文件的功能，它可以作为弹出窗口或者细</p><p style="text-indent: 2em;font-size:18px;">节窗口，实现重要信息的全屏展示，也可以作为多文档互动的桥梁，</p><p style="text-indent: 2em;font-size:18px;">实现页面的交互功能。 </p><p style="text-indent: 2em;font-size:18px;"> 总之，iframe标签的用处非常广泛，它可以帮助我们实现多种</p><p style="text-indent: 2em;font-size:18px;">各种功能，极大地丰富了网页的功能性，而且使用起来也非常的简单。 </p><p style="text-indent: 2em;font-size:18px;"> 接下来我们来看一个具体的示例，假设我们有一个网页，其中有</p><p style="text-indent: 2em;font-size:18px;">一个表单框，表单框中要求用户提供一定的信息，但是用户并不想要</p><p style="text-indent: 2em;font-size:18px;">填写，我们可以使用iframe标签来实现，代码如下： </p><p style="text-indent: 2em;font-size:18px;"> <iframe src=表单页面链接 width=500 height=500 </p><p style="text-indent: 2em;font-size:18px;">frameborder=0 scrolling=yes /> </p><p style="text-indent: 2em;font-size:18px;"> 在这段代码中，我们使用了iframe标签，将表单页面的链接作</p><p style="text-indent: 2em;font-size:18px;">为src属性的值，并且设置了一些参数，控制表单的出现效果，最终</p><p style="text-indent: 2em;font-size:18px;">结果就是将表单页面的内容嵌入到当前页面中，而用户也不用填写内</p><p style="text-indent: 2em;font-size:18px;">容，就可以提交表单了。 </p><p style="text-indent: 2em;font-size:18px;"> 这就是我们今天介绍的html iframe用法，通过iframe标签的</p><p style="text-indent: 2em;font-size:18px;">使用，实现了许多功能，增强了网页的多样性，让网页的功能更加丰</p><p style="text-indent: 2em;font-size:18px;">富。 </p><p style="text-indent: 2em;font-size:18px;"> </p><p style="text-indent: 2em;font-size:18px;"> - 2 - </p><p><p><h2></h2></p></img></p></div></article></div><div class="fzithome-com info"><div><span>本文发布于:2024-04-18，感谢您对本站的认可！</span></div><div><span>本文链接:</span><a href="https://www.fzithome.com/xitong/1713455678a474202.html" title="html iframe用法">https://www.fzithome.com/xitong/1713455678a474202.html</a></div><div><span>版权声明:本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。</span></div></div><span class="tag"><i class="iconfont icon-discount" style="font-size:12px;font-weight:bold;opacity:.7;">本文标签：</i><a href="/tag/421.html" target="_blank">页面</a><a href="/tag/1493.html" target="_blank">标签</a><a href="/tag/1441.html" target="_blank">嵌入</a><a href="/tag/1102.html" target="_blank">实现</a></span></div><div class="fzithome-com post_comments" id="comments"><div id="comt-respond" class="commentpost"><h4>发布评论 <span><a rel="nofollow" id="cancel-reply" href="#comment" style="display:none;"><small>取消回复</small></a></span></h4><form action="/comment/create/474202.html?safe_token=0kyB5MyPYhnPdjpMaaaj_2Bsb5JT4TObqKs7hJr8N_2FeDiQbGbbcM7uysFMAMXN6zdn4uF_2FBKf5CnSdTK1xQiNEEw_3D_3D" method="post" name="saypl" id="frmSumbit"><input type="hidden" name="doctype" value="1" /><input type="hidden" name="quotepid" value="0" /><div id="comment-tools"><div class="fzithome-com tools_text"><textarea placeholder="请在这里留言..." name="message" id="txaArticle" class="text input-block-level comt-area" cols="50" rows="4" tabindex="5"></textarea></div></div><div class="fzithome-com psumbit"><input name="sumbit" type="submit" tabindex="6" value="发布" class="button" /></div></form></div><div class="fzithome-com commentlist"><div class="fzithome-com comment-tab"><div class="fzithome-com come-comt">评论列表<span id="comment_count">（有<span id="infocommentnumarea" style="color:#c81111">0</span>条评论）</span></div></div><ul class="diy-comment"></ul></div></div></div><div class="fzithome-com mainr"><div class="widget widget_previous"><h4 class="bar">最近发表</h4><ul><li><a href="/xitong/1700737372a25.html"title='各种文件后缀名与打开方式大全' aria-label='各种文件后缀名与打开方式大全'>各种文件后缀名与打开方式大全</a></li><li><a href="/xitong/1700737532a33.html"title='Excel' aria-label='Excel'>Excel</a></li><li><a href="/xitong/1700738202a66.html"title='ArcGIS10.2 Data Interoperability扩展模块教程' aria-label='ArcGIS10.2 Data Interoperability扩展模块教程'>ArcGIS10.2 Data Interoperability扩展模块教程</a></li><li><a href="/xitong/1700738783a90.html"title='excel属性方法' aria-label='excel属性方法'>excel属性方法</a></li><li><a href="/xitong/1700739471a122.html"title='Access数据库程序设计上机操作练习题2' aria-label='Access数据库程序设计上机操作练习题2'>Access数据库程序设计上机操作练习题2</a></li><li><a href="/xitong/1700740603a169.html"title='java怎么解析mdb文件_java解析MDB文件的方法,已经写成公用方法' aria-label='java怎么解析mdb文件_java解析MDB文件的方法,已经写成公用方法'>java怎么解析mdb文件_java解析MDB文件的方法,已经写成公用方法</a></li><li><a href="/xitong/1700740946a187.html"title='同绘经营权建库系统数据库质量检查汇交流程0809' aria-label='同绘经营权建库系统数据库质量检查汇交流程0809'>同绘经营权建库系统数据库质量检查汇交流程0809</a></li><li><a href="/xitong/1700744763a361.html"title='瑞星杀毒软件网络版客户端' aria-label='瑞星杀毒软件网络版客户端'>瑞星杀毒软件网络版客户端</a></li><li><a href="/xitong/1700746143a432.html"title='如何才能彻底清除硬盘中的数据' aria-label='如何才能彻底清除硬盘中的数据'>如何才能彻底清除硬盘中的数据</a></li><li><a href="/xitong/1700746615a453.html"title='CAD2016卸载方法,如何完全彻底卸载删除清理干净CAD各种残留注册表和文' aria-label='CAD2016卸载方法,如何完全彻底卸载删除清理干净CAD各种残留注册表和文'>CAD2016卸载方法,如何完全彻底卸载删除清理干净CAD各种残留注册表和文</a></li><li><a href="/xitong/1700747757a511.html"title='在面试中如何进行无领导小组讨论' aria-label='在面试中如何进行无领导小组讨论'>在面试中如何进行无领导小组讨论</a></li><li><a href="/xitong/1700748243a536.html"title='融媒时代新闻短视频内容运营策略探析——以一点资讯“沸点视频”为例' aria-label='融媒时代新闻短视频内容运营策略探析——以一点资讯“沸点视频”为例'>融媒时代新闻短视频内容运营策略探析——以一点资讯“沸点视频”为例</a></li><li><a href="/xitong/1700749070a577.html"title='怎样查找行业研究热点资料' aria-label='怎样查找行业研究热点资料'>怎样查找行业研究热点资料</a></li><li><a href="/xitong/1700759737a1091.html"title='Win7系统怎么一键还原' aria-label='Win7系统怎么一键还原'>Win7系统怎么一键还原</a></li><li><a href="/xitong/1700764000a1323.html"title='怎么调显卡风扇转速' aria-label='怎么调显卡风扇转速'>怎么调显卡风扇转速</a></li><li><a href="/xitong/1700764130a1331.html"title='手把手教你cpu风扇转速多少正常' aria-label='手把手教你cpu风扇转速多少正常'>手把手教你cpu风扇转速多少正常</a></li><li><a href="/xitong/1700764303a1341.html"title='电脑风扇的结构及调速原理祥解' aria-label='电脑风扇的结构及调速原理祥解'>电脑风扇的结构及调速原理祥解</a></li><li><a href="/xitong/1700764570a1356.html"title='降低电脑风扇噪音的小妙招' aria-label='降低电脑风扇噪音的小妙招'>降低电脑风扇噪音的小妙招</a></li><li><a href="/xitong/1700764781a1369.html"title='电脑的BIOS设置与调整' aria-label='电脑的BIOS设置与调整'>电脑的BIOS设置与调整</a></li><li><a href="/xitong/1700767325a1512.html"title='电脑莫名重启' aria-label='电脑莫名重启'>电脑莫名重启</a></li></ul></div><section id="aside_about" class="widget widget_aside_about sb br mb"><div class="avatar"><img class="img" src="/view/template/mitiqin/img/tx.jpg" alt="福州电脑网_福州电脑维修_福州电脑之家_福州iThome"/></div><div class="wrap pd"><p class="title">福州电脑网_福州电脑维修_福州电脑之家_福州iThome</p><p class="info">福州电脑维修网(fzithome.com)专业的电脑维修,笔记本维修,上门维修各种电脑,笔记本,平板等,快速上门.电脑知识频道内容覆盖:计算机资讯,电脑基础应用知识,各种电脑故障维修学习,电脑外设产品维修维护,病毒，软件,硬件,常识.</p><ul class="ul clearfix"></ul></div></section><div class="fzithome-com clear"></div><div class="fzithome-com widgets"><h4 class="bar">相关推荐</h4><div class="fzithome-com hot-post"><ul class="clearfix"><li><a href="/biancheng/1754668290a2626907.html"title='Google搜索结果新标签页打开' aria-label='Google搜索结果新标签页打开'><span class="sptit">Google搜索结果新标签页打开</span></a></li><li><a href="/biancheng/1754668320a2626912.html"title='Vue项目在IE浏览器页面白屏且报错SCRIPT1010:缺少标识符' aria-label='Vue项目在IE浏览器页面白屏且报错SCRIPT1010:缺少标识符'><span class="sptit">Vue项目在IE浏览器页面白屏且报错SCRIPT1010:缺少标识符</span></a></li><li><a href="/biancheng/1754668381a2626919.html"title='vue2.0兼容ie浏览器（页面加载及导出问题）' aria-label='vue2.0兼容ie浏览器（页面加载及导出问题）'><span class="sptit">vue2.0兼容ie浏览器（页面加载及导出问题）</span></a></li><li><a href="/biancheng/1754669314a2627023.html"title='HarmonyOS 使用DevTools工具调试前端页面' aria-label='HarmonyOS 使用DevTools工具调试前端页面'><span class="sptit">HarmonyOS 使用DevTools工具调试前端页面</span></a></li><li><a href="/biancheng/1754670823a2627232.html"title='自定义浏览器起始页、主页和标签页（html+css）' aria-label='自定义浏览器起始页、主页和标签页（html+css）'><span class="sptit">自定义浏览器起始页、主页和标签页（html+css）</span></a></li><li><a href="/biancheng/1754821904a2646236.html"title='dell ubuntu+windows双系统选择页面突然不见' aria-label='dell ubuntu+windows双系统选择页面突然不见'><span class="sptit">dell ubuntu+windows双系统选择页面突然不见</span></a></li><li><a href="/biancheng/1754844240a2648002.html"title='qq空间h5页面，如何在微信中直接打开qq空间链接却不需要登陆qq账号密码' aria-label='qq空间h5页面，如何在微信中直接打开qq空间链接却不需要登陆qq账号密码'><span class="sptit">qq空间h5页面，如何在微信中直接打开qq空间链接却不需要登陆qq账号密码</span></a></li><li><a href="/biancheng/1754845011a2648128.html"title='小米登录的HTML源代码,html--登录页面（小米登录）' aria-label='小米登录的HTML源代码,html--登录页面（小米登录）'><span class="sptit">小米登录的HTML源代码,html--登录页面（小米登录）</span></a></li><li><a href="/biancheng/1754845068a2648137.html"title='h5 页面唤起微信和qq' aria-label='h5 页面唤起微信和qq'><span class="sptit">h5 页面唤起微信和qq</span></a></li><li><a href="/biancheng/1754847216a2648404.html"title='qq互动视频页面加载失败_腾讯视频互动视频 | 创作指南' aria-label='qq互动视频页面加载失败_腾讯视频互动视频 | 创作指南'><span class="sptit">qq互动视频页面加载失败_腾讯视频互动视频 | 创作指南</span></a></li><li><a href="/biancheng/1754864877a2651656.html"title='小米官网登陆页面制作' aria-label='小米官网登陆页面制作'><span class="sptit">小米官网登陆页面制作</span></a></li><li><a href="/biancheng/1754897670a2655522.html"title='怎样让浏览器随意修改访问中的 web 页面' aria-label='怎样让浏览器随意修改访问中的 web 页面'><span class="sptit">怎样让浏览器随意修改访问中的 web 页面</span></a></li><li><a href="/biancheng/1755023083a2659448.html"title='浏览器渲染过程解析——从URL到页面显示' aria-label='浏览器渲染过程解析——从URL到页面显示'><span class="sptit">浏览器渲染过程解析——从URL到页面显示</span></a></li><li><a href="/biancheng/1755023169a2659464.html"title='H5页面在手机浏览器上无法播放视频或无法切换视频源的解决方案' aria-label='H5页面在手机浏览器上无法播放视频或无法切换视频源的解决方案'><span class="sptit">H5页面在手机浏览器上无法播放视频或无法切换视频源的解决方案</span></a></li><li><a href="/biancheng/1755023207a2659472.html"title='jsp页面可以在浏览器中运行但无法在eclipse内部显示' aria-label='jsp页面可以在浏览器中运行但无法在eclipse内部显示'><span class="sptit">jsp页面可以在浏览器中运行但无法在eclipse内部显示</span></a></li><li><a href="/biancheng/1755023898a2659604.html"title='解决Google浏览器打开页面速度太慢问题' aria-label='解决Google浏览器打开页面速度太慢问题'><span class="sptit">解决Google浏览器打开页面速度太慢问题</span></a></li><li><a href="/biancheng/1755024138a2659651.html"title='Windows远程桌面实现之四（在现代浏览器中通过普通页面访问远程桌面）' aria-label='Windows远程桌面实现之四（在现代浏览器中通过普通页面访问远程桌面）'><span class="sptit">Windows远程桌面实现之四（在现代浏览器中通过普通页面访问远程桌面）</span></a></li><li><a href="/biancheng/1755024689a2659766.html"title='vue项目在IE浏览器和360兼容模式下页面不显示问题，亲测有效' aria-label='vue项目在IE浏览器和360兼容模式下页面不显示问题，亲测有效'><span class="sptit">vue项目在IE浏览器和360兼容模式下页面不显示问题，亲测有效</span></a></li><li><a href="/biancheng/1755036942a2662460.html"title='PS(Photoshop) 软件打开后页面发黄？' aria-label='PS(Photoshop) 软件打开后页面发黄？'><span class="sptit">PS(Photoshop) 软件打开后页面发黄？</span></a></li><li><a href="/biancheng/1755057865a2666064.html"title='多标签文件管理器 - Win10' aria-label='多标签文件管理器 - Win10'><span class="sptit">多标签文件管理器 - Win10</span></a></li></ul></div></div><div class="fzithome-com clear"></div><div class="widget widget_tags"><h4 class="bar">标签列表</h4><ul><li class="submenu"><a target="_blank" href="/tag/231616.html">海尔S14 Pro 14英寸 8GB256GB固态参数报价</a></li><li class="submenu"><a target="_blank" href="/tag/231610.html">Acer宏碁掠夺者战斧18 2024新款i914900HX32</a></li><li class="submenu"><a target="_blank" href="/tag/231605.html">ThinkBook 16 2024 酷睿版 Ultra7 155</a></li><li class="submenu"><a target="_blank" href="/tag/231580.html">神舟战神S8 i5 13420H16GB512GBRTX4050</a></li><li class="submenu"><a target="_blank" href="/tag/231566.html">python知识点100篇系列（13）</a></li><li class="submenu"><a target="_blank" href="/tag/231563.html">使用Python实现深度学习模型智能网络安全威胁检测</a></li><li class="submenu"><a target="_blank" href="/tag/231552.html">FastAPI后台开发基础（1）框架简介</a></li><li class="submenu"><a target="_blank" href="/tag/231544.html">Suno公司开源的文生语音工具Bark，让你秒变音乐人</a></li><li class="submenu"><a target="_blank" href="/tag/231491.html">机器学习ID3C45CART 算法</a></li><li class="submenu"><a target="_blank" href="/tag/231484.html">python知识点100篇系列（14）</a></li><li class="submenu"><a target="_blank" href="/tag/231483.html">技巧JS代码这么写，前端小姐姐都会爱上你</a></li><li class="submenu"><a target="_blank" href="/tag/231410.html">项目没亮点那就来学下pk功能设计吧</a></li><li class="submenu"><a target="_blank" href="/tag/231407.html">单细胞miloR分析(基于 KNN 图的细胞差异丰度分析方法)</a></li><li class="submenu"><a target="_blank" href="/tag/231348.html">基准测试理论全面介绍IOmeterStreamWhetstone</a></li><li class="submenu"><a target="_blank" href="/tag/231327.html">通往自主可观测性的道路</a></li><li class="submenu"><a target="_blank" href="/tag/231301.html">不俗</a></li><li class="submenu"><a target="_blank" href="/tag/231298.html">教学设施</a></li><li class="submenu"><a target="_blank" href="/tag/231268.html">中南大学邓磊教授团队提出MolMVC模型，通过多视图对比学习增强</a></li><li class="submenu"><a target="_blank" href="/tag/231257.html">Maps</a></li><li class="submenu"><a target="_blank" href="/tag/231180.html">联邦学习中的“贡献度”求解算法</a></li></ul></div><div class="fzithome-com clear"></div></div></div><footer id="footer"><div class="footer container-w cl"><div class="fnav"></div><span class="copy"> CopyRight © 2022 All Rights Reserved <a href="/" title="福州电脑网_福州电脑维修_福州电脑之家_福州iThome" target="_blank">福州电脑网_福州电脑维修_福州电脑之家_福州iThome</a></span> 备案号：<a target="_blank" rel="nofollow" href="https://beian.miit.gov.cn/" style="font-size: 12px;">豫ICP备2022026798号-13</a></div></footer><script src="/view/template/mitiqin/js/common.min.js?2.3.0"></script><script src="/view/js/xiuno.js"></script><script src="/view/template/mitiqin/js/app.js?2.3.0"></script><div id="gotop"><div style="display: none; margin-bottom:5px;" id="goTopBtn"><a title="返回顶部" class="gotopa"><span class="iconfont icon-rocket-fill"></span></a></div></div></body></html>