首页
后端开发
PHP
JAVA
Python
ASP.NET
GO
其他后端知识
前端开发
HTML
CSS
VUE
JavaScript
Node.js
其他前端知识
数据库
服务器
操作系统
移动开发
CMS
主机资讯
脚本
首页
前端开发
JavaScript
是什么？html中iframe标签的用法详解</a> </div> <div class="pptw5com s2951490erx erx-flex erx-m-bot erx-content"> <main class="pptw-main-com erx-main"> <article class="a2674049940erx erx-m-bot erx-article"> <h1><iframe>是什么？html中iframe标签的用法详解</h1> <section class="i"> <span class="time"><em>时间</em><i>2024-01-28 23:26:03</i></span><span class="auth"><em>发布</em>访客</span><span class="cate"><em>分类</em><a href="https://pptw.com/javascript/">JavaScript</a></span><span class="view"><em>浏览</em><i>906</i></span> </section> <section class="c2674049940erx con erx-has-tip"> <div class="intro"><strong>导读：</strong>收集整理的这篇文章主要介绍了<iframe>是什么？html中iframe标签的用法详解，觉得挺不错的，现在分享给大家，也给大家做个参考。经常进行页面布局的人对于HTML中的iframe标签一定不陌生，iframe标签是一个内联...</div> 收集整理的这篇文章主要介绍了iframe> 是什么？html中iframe标签的用法详解，觉得挺不错的，现在分享给大家，也给大家做个参考。经常进行页面布局的人对于HTML中的iframe标签一定不陌生，iframe标签是一个内联框架，说白了就是用来在当前 HTML 页面中嵌入另一个文档的。刚刚接触前端的小伙伴可能不知道html中iframe标签的用法，这篇文章就结合实例给大家讲解html中iframe标签的使用用法，有一定的参考价值，感兴趣的朋友可以看看。<p></p><p>iframe> 标签是一个内联框架，即用来在当前 HTML 页面中嵌入另一个文档的，且所有主流浏览器都支持iframe标签。</p><p>基本语法：iframe src="文件路径"> /iframe> </p><p>iframe> 标签常用属性介绍:</p><p>height可以设置框架显示的高度<br>width可以设置框架显示的宽度<br>name可以定义框架的名称<br>frameborder用来定义是否需要显示边框，取值为1表示需要边框<br>scrolling用来设置框架是否需要滚动条，取值可以是yes,no,auto<br>src用于设置框架的地址，可以使页面地址，也可以是图片地址<br>align用于设置元素对齐方式，取值可以是left，right，top，middle，bottom</p><p>以上属性可以根据需要进行设置。</p><p><strong>实例讲解：html中iframe> 标签的使用方法</strong></p><p>首先新建两个HTML页面，一个命名为iframe-content.html，另一个命名为iframe.html，在iframe-content.html中添加内容，代码如下：</p><pre class="brush:html; toolbar:false">!DOCTYPE html> html> head> meta charset="UTF-8"> tITle> /title> /head> body> p> 蒹葭苍苍，白露为霜。所谓伊人，在水一方。/p> p> 溯洄从之，道阻且长。溯游从之，宛在水中央。/p> p> 蒹葭萋萋，白露未晞。所谓伊人，在水之湄。/p> p> 溯洄从之，道阻且跻。溯游从之，宛在水中坻。/p> /body> /html> </pre><p>然后用iframe> 标签将iframe-content.html文件嵌入到iframe.html中，可以根据自己的需要设置样式，此例将frameborder设为0，不需要边框， 将scrolling设为no，不需要滚动条，具体代码如下：</p><pre class="brush:html; toolbar:false">!DOCTYPE html> html> head> meta charset="UTF-8"> title> /title> /head> body> iframe src="iframe-content.html" width="400px" height="150px" frameborder="0" scrolling="no"> /iframe> /body> /html> </pre><p>有边框和滚动条的效果图：</p><p></p><p></p><p>没有边框和滚动条的效果图：</p><p></p><p></p><p>当页面中有大部分内容相同时，比如页面的头部和底部，我们就可以使用iframe> 标签将重复的部分嵌入页面中，这样可以减少代码的重复率，减轻代码量，但不足之处是页面url地址没有改变。</p><p>以上结合实例给大家介绍了html中iframe> 标签的使用方法，小白一定要自己动手尝试，看看你的代码能不能实现这样的效果，希望这篇文章对你有所帮助！</p><p>【相关教程推荐】</p><p>1. HTML教程<br>2. HTML5视频教程<br>3. bootstrap教程 </p><p>以上就是iframe> 是什么？html中iframe标签的用法详解的详细内容，更多请关注其它相关文章！</p><div class="social-share" data-initialized="true" style="text-align: center; "> <a href="#" class="social-share-icon icon-weibo"></a> <a href="#" class="social-share-icon icon-qq"></a> <a href="#" class="social-share-icon icon-wechat"></a> <a href="#" class="social-share-icon icon-tencent"></a> <a href="#" class="social-share-icon icon-douban"></a> <a href="#" class="social-share-icon icon-qzone"></a> <a href="#" class="social-share-icon icon-linkedin"></a> <a href="#" class="social-share-icon icon-facebook"></a> <a href="#" class="social-share-icon icon-twitter"></a> <a href="#" class="social-share-icon icon-google"></a> </div> <p>声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！</p> </section> <section class="tags"> <a href="https://pptw.com/html/" target="_blank">html</a> </section> <br/>若转载请注明出处： <a href="https://pptw.com/jishu/590298.html"><iframe>是什么？html中iframe标签的用法详解</a> <br> 本文地址： <a href="https://pptw.com/jishu/590298.html" title="<iframe>是什么？html中iframe标签的用法详解">https://pptw.com/jishu/590298.html</a> <section class="erx-flex p"> <span class="prev"><a href="https://pptw.com/jishu/590297.html" title="上一篇：如何使用HTML布局web页面？（代码示例）">如何使用HTML布局web页面？（代码示例）</a></span> <span class="next"><a href="https://pptw.com/jishu/590299.html" title="下一篇：BAT各大互联网公司html+css前端面试题总结">BAT各大互联网公司html+css前端面试题总结</a></span> </section> </article> <div class="pptw-related-box-com erx-m-bot erx-related-box"> <ul class="pptw-related-list-com erx-flex erx-related-list"> <li><a href="https://pptw.com/jishu/655145.html" title="HTML如何更改按钮颜色，方法是什么">HTML如何更改按钮颜色，方法是什么</a></li> <li><a href="https://pptw.com/jishu/655142.html" title="HTML设置表格大小的方法是什么">HTML设置表格大小的方法是什么</a></li> <li><a href="https://pptw.com/jishu/655140.html" title="HTML中怎样实现网页音乐播放器功能">HTML中怎样实现网页音乐播放器功能</a></li> <li><a href="https://pptw.com/jishu/655138.html" title="HTML的行内块状级元素包括什么">HTML的行内块状级元素包括什么</a></li> <li><a href="https://pptw.com/jishu/655137.html" title="HTML项目中如何实现按钮功能">HTML项目中如何实现按钮功能</a></li> <li><a href="https://pptw.com/jishu/655102.html" title="HTML中如何隐藏td标签，有哪些方法">HTML中如何隐藏td标签，有哪些方法</a></li> <li><a href="https://pptw.com/jishu/655097.html" title="HTML中在图片上加文字的操作是什么">HTML中在图片上加文字的操作是什么</a></li> <li><a href="https://pptw.com/jishu/655093.html" title="HTML页面中超链接文本颜色怎样修改">HTML页面中超链接文本颜色怎样修改</a></li> <li><a href="https://pptw.com/jishu/655091.html" title="HTML页面显示图片有哪些方式">HTML页面显示图片有哪些方式</a></li> <li><a href="https://pptw.com/jishu/655088.html" title="HTML中去掉input的边框方法有几种">HTML中去掉input的边框方法有几种</a></li> </ul> </div> <!--评论框--> <div id="divCommentPost" class="pptw-cpost-com cpost"> <a rel="nofollow" id="cancel-reply" href="#divCommentPost" style="display:none;" title="取消回复">✕</a> <form id="frmSumbit" target="_self" method="post" action="https://pptw.com/zb_system/cmd.php?act=cmt&postid=590298&key=12d387ccb1687a8d084a22697b2c33ad" > <input type="hidden" name="inpId" id="inpId" value="590298"> <input type="hidden" name="inpRevID" id="inpRevID" value="0"> <p><textarea name="txaArticle" id="txaArticle" class="text" cols="50" rows="4" tabindex="5" ></textarea></p> <div class="erx-flex post-item"> <p class="item"><input type="text" name="inpName" id="inpName" class="text" value="访客" size="28" tabindex="1"> <label for="inpName">名称(*)</label></p> <p class="item emial"><input type="text" name="inpEmail" id="inpEmail" class="text" value="" size="28" tabindex="2"> <label for="inpEmail">邮箱</label></p> </div> <div class="erx-flex post-bot"><span class="ti"><b>游客</b> 回复需填写必要信息</span><input name="sumbit" type="submit" tabindex="6" value="提交" onclick="return zbp.comment.post()" class="button"></div> </form> </div><label id="AjaxCommentBegin"></label> <!--评论输出--> <label id="AjaxCommentEnd"></label> </main> <aside class="pptw-sidebar-com erx-sidebar"> <dl class="pptw-function-com function"> <dt class="function_t">相邻内容</dt> <dd class="function_c"> <ul class="pptw-side-list-com erx-side-list"> <li><a href="https://pptw.com/jishu/590303.html" title="img底部留白问题的六大解决方法">img底部留白问题的六大解决方法</a></li><li><a href="https://pptw.com/jishu/590302.html" title="html中cite标签的使用方法及属性详解">html中cite标签的使用方法及属性详解</a></li><li><a href="https://pptw.com/jishu/590301.html" title="什么是伪类和伪元素？伪类和伪元素的区别的区别详解">什么是伪类和伪元素？伪类和伪元素的区别的区别详解</a></li><li><a href="https://pptw.com/jishu/590300.html" title="caption标签什么意思使用方法介绍（附代码）">caption标签什么意思使用方法介绍（附代码）</a></li><li><a href="https://pptw.com/jishu/590299.html" title="BAT各大互联网公司html+css前端面试题总结">BAT各大互联网公司html+css前端面试题总结</a></li><li><a href="https://pptw.com/jishu/590297.html" title="如何使用HTML布局web页面？（代码示例）">如何使用HTML布局web页面？（代码示例）</a></li><li><a href="https://pptw.com/jishu/590296.html" title="哪些标签可以制作html按钮（图文详解）">哪些标签可以制作html按钮（图文详解）</a></li><li><a href="https://pptw.com/jishu/590295.html" title="html中的font是什么标签？怎么使用？（代码详解）">html中的font是什么标签？怎么使用？（代码详解）</a></li><li><a href="https://pptw.com/jishu/590294.html" title="html中mark标签的使用方法详解（附代码）">html中mark标签的使用方法详解（附代码）</a></li> </ul> </dd> </dl> <dl class="function" id="divSearchPanel"> <dt class="function_t">搜索</dt><dd class="function_c"> <div><form name="search" method="post" action="https://pptw.com/zb_system/cmd.php?act=search"><label><span style="position:absolute;color:transparent;z-index:-9999;">Search</span><input type="text" name="q" size="11" /></label> <input type="submit" value="搜索" /></form></div> </dd> </dl> <dl class="function" id="divPrevious"> <dt class="function_t">最近发表</dt><dd class="function_c"> <ul><li><a title="MySQL数据类型如何查询" href="https://pptw.com/jishu/705769.html">MySQL数据类型如何查询</a></li> <li><a title="MySQL数据类型怎样设置" href="https://pptw.com/jishu/705768.html">MySQL数据类型怎样设置</a></li> <li><a title="MySQL数据类型性能怎样" href="https://pptw.com/jishu/705767.html">MySQL数据类型性能怎样</a></li> <li><a title="MySQL数据类型如何修改" href="https://pptw.com/jishu/705766.html">MySQL数据类型如何修改</a></li> <li><a title="MySQL外键约束会影响吗" href="https://pptw.com/jishu/705765.html">MySQL外键约束会影响吗</a></li> <li><a title="MySQL数据类型怎样使用" href="https://pptw.com/jishu/705764.html">MySQL数据类型怎样使用</a></li> <li><a title="MySQL外键约束会出错吗" href="https://pptw.com/jishu/705763.html">MySQL外键约束会出错吗</a></li> <li><a title="MySQL外键约束适用场景" href="https://pptw.com/jishu/705762.html">MySQL外键约束适用场景</a></li> <li><a title="MySQL外键约束用处在哪" href="https://pptw.com/jishu/705761.html">MySQL外键约束用处在哪</a></li> <li><a title="MySQL外键约束如何维护" href="https://pptw.com/jishu/705760.html">MySQL外键约束如何维护</a></li> </ul> </dd> </dl> <dl class="function" id="divTags"> <dt class="function_t">标签列表</dt><dd class="function_c"> <ul><li><a title="php" href="https://pptw.com/php/">php<span class="tag-count"> (3322)</span></a></li> <li><a title="java" href="https://pptw.com/java/">java<span class="tag-count"> (3177)</span></a></li> <li><a title="程序员" href="https://pptw.com/%E7%A8%8B%E5%BA%8F%E5%91%98/">程序员<span class="tag-count"> (2779)</span></a></li> <li><a title="服务器" href="https://pptw.com/%E6%9C%8D%E5%8A%A1%E5%99%A8/">服务器<span class="tag-count"> (1445)</span></a></li> <li><a title="html" href="https://pptw.com/html/">html<span class="tag-count"> (831)</span></a></li> <li><a title="html5" href="https://pptw.com/html5/">html5<span class="tag-count"> (1036)</span></a></li> <li><a title="python" href="https://pptw.com/python/">python<span class="tag-count"> (3182)</span></a></li> <li><a title="div" href="https://pptw.com/div/">div<span class="tag-count"> (821)</span></a></li> <li><a title="猜你在找的html5相关文章 关于移动端h5开发相关内容总结" href="https://pptw.com/%E7%8C%9C%E4%BD%A0%E5%9C%A8%E6%89%BE%E7%9A%84html5%E7%9B%B8%E5%85%B3%E6%96%87%E7%AB%A0%20%E5%85%B3%E4%BA%8E%E7%A7%BB%E5%8A%A8%E7%AB%AFh5%E5%BC%80%E5%8F%91%E7%9B%B8%E5%85%B3%E5%86%85%E5%AE%B9%E6%80%BB%E7%BB%93/">猜你在找的html5相关文章 关于移动端h5开发相关内容总结<span class="tag-count"> (747)</span></a></li> <li><a title="2022-05-17html5教程-学表单的第二天" href="https://pptw.com/2022-05-17html5%E6%95%99%E7%A8%8B-%E5%AD%A6%E8%A1%A8%E5%8D%95%E7%9A%84%E7%AC%AC%E4%BA%8C%E5%A4%A9/">2022-05-17html5教程-学表单的第二天<span class="tag-count"> (741)</span></a></li> <li><a title="更多" href="https://pptw.com/%E6%9B%B4%E5%A4%9A/">更多<span class="tag-count"> (2775)</span></a></li> <li><a title="load" href="https://pptw.com/load/">load<span class="tag-count"> (1845)</span></a></li> <li><a title="HTML" href="https://pptw.com/HTML/">HTML<span class="tag-count"> (913)</span></a></li> <li><a title="post-format-gallery" href="https://pptw.com/post-format-gallery/">post-format-gallery<span class="tag-count"> (1823)</span></a></li> <li><a title="猜你在找的JavaScript相关文章 html font标签如何设置字体大小？html font标签属性用法介绍" href="https://pptw.com/%E7%8C%9C%E4%BD%A0%E5%9C%A8%E6%89%BE%E7%9A%84JavaScript%E7%9B%B8%E5%85%B3%E6%96%87%E7%AB%A0%20html%20font%E6%A0%87%E7%AD%BE%E5%A6%82%E4%BD%95%E8%AE%BE%E7%BD%AE%E5%AD%97%E4%BD%93%E5%A4%A7%E5%B0%8F%EF%BC%9Fhtml%20font%E6%A0%87%E7%AD%BE%E5%B1%9E%E6%80%A7%E7%94%A8%E6%B3%95%E4%BB%8B%E7%BB%8D/">猜你在找的JavaScript相关文章 html font标签如何设置字体大小？html font标签属性用法介绍<span class="tag-count"> (951)</span></a></li> <li><a title="2022-05-16vue3+TypeScript+vue-router的使用方法" href="https://pptw.com/2022-05-16vue3%2BTypeScript%2Bvue-router%E7%9A%84%E4%BD%BF%E7%94%A8%E6%96%B9%E6%B3%95/">2022-05-16vue3+TypeScript+vue-router的使用方法<span class="tag-count"> (945)</span></a></li> <li><a title="2022-04-16vue3获取当前路由地址" href="https://pptw.com/2022-04-16vue3%E8%8E%B7%E5%8F%96%E5%BD%93%E5%89%8D%E8%B7%AF%E7%94%B1%E5%9C%B0%E5%9D%80/">2022-04-16vue3获取当前路由地址<span class="tag-count"> (940)</span></a></li> <li><a title="2022-04-16如何利用React实现图片识别App" href="https://pptw.com/2022-04-16%E5%A6%82%E4%BD%95%E5%88%A9%E7%94%A8React%E5%AE%9E%E7%8E%B0%E5%9B%BE%E7%89%87%E8%AF%86%E5%88%ABApp/">2022-04-16如何利用React实现图片识别App<span class="tag-count"> (938)</span></a></li> <li><a title="2022-04-16JavaScript展开运算符和剩余运算符的区别详解" href="https://pptw.com/2022-04-16JavaScript%E5%B1%95%E5%BC%80%E8%BF%90%E7%AE%97%E7%AC%A6%E5%92%8C%E5%89%A9%E4%BD%99%E8%BF%90%E7%AE%97%E7%AC%A6%E7%9A%84%E5%8C%BA%E5%88%AB%E8%AF%A6%E8%A7%A3/">2022-04-16JavaScript展开运算符和剩余运算符的区别详解<span class="tag-count"> (938)</span></a></li> <li><a title="2022-04-16微信小程序中使用vant框架的具体步骤" href="https://pptw.com/2022-04-16%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F%E4%B8%AD%E4%BD%BF%E7%94%A8vant%E6%A1%86%E6%9E%B6%E7%9A%84%E5%85%B7%E4%BD%93%E6%AD%A5%E9%AA%A4/">2022-04-16微信小程序中使用vant框架的具体步骤<span class="tag-count"> (938)</span></a></li> <li><a title="2022-04-16Vue elementUI表单嵌套表格并对每行进行校验详解" href="https://pptw.com/2022-04-16Vue%C2%A0elementUI%E8%A1%A8%E5%8D%95%E5%B5%8C%E5%A5%97%E8%A1%A8%E6%A0%BC%E5%B9%B6%E5%AF%B9%E6%AF%8F%E8%A1%8C%E8%BF%9B%E8%A1%8C%E6%A0%A1%E9%AA%8C%E8%AF%A6%E8%A7%A3/">2022-04-16Vue elementUI表单嵌套表格并对每行进行校验详解<span class="tag-count"> (938)</span></a></li> <li><a title="2022-04-16如何利用Typescript封装本地存储" href="https://pptw.com/2022-04-16%E5%A6%82%E4%BD%95%E5%88%A9%E7%94%A8Typescript%E5%B0%81%E8%A3%85%E6%9C%AC%E5%9C%B0%E5%AD%98%E5%82%A8/">2022-04-16如何利用Typescript封装本地存储<span class="tag-count"> (935)</span></a></li> <li><a title="2022-04-16微信小程序中wxs文件的一些妙用分享" href="https://pptw.com/2022-04-16%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F%E4%B8%ADwxs%E6%96%87%E4%BB%B6%E7%9A%84%E4%B8%80%E4%BA%9B%E5%A6%99%E7%94%A8%E5%88%86%E4%BA%AB/">2022-04-16微信小程序中wxs文件的一些妙用分享<span class="tag-count"> (935)</span></a></li> <li><a title="2022-04-16JavaScript的Set数据结构详解" href="https://pptw.com/2022-04-16JavaScript%E7%9A%84Set%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84%E8%AF%A6%E8%A7%A3/">2022-04-16JavaScript的Set数据结构详解<span class="tag-count"> (935)</span></a></li> <li><a title="2022-04-16 其他相关热搜词" href="https://pptw.com/2022-04-16%20%20%20%20%20%20%20%20%20%20%20%20%20%20%E5%85%B6%E4%BB%96%E7%9B%B8%E5%85%B3%E7%83%AD%E6%90%9C%E8%AF%8D/">2022-04-16 其他相关热搜词<span class="tag-count"> (1215)</span></a></li> </ul> </dd> </dl> </aside> </div> </div> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?2919cb573f03f201ca897c5138f8bdbb"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> <footer class="pptw-footer-com footer"> <div class="pptw-wrap-com erx-wrap"> <p class="footmsg">Powered by <a href="https://pptw.com" target="_blank">PPTW技术分享</a> Themes by <a href="http://beian.miit.gov.cn/" rel="nofollow" target="_blank">渝ICP备2021004463号</a></p> <p class="copyright">Copyright 2023 PPTW.COM Rights Reserved.</p> </div> </footer> <a href="#top" title="返回顶部" class="pptw-gotop-com erx-gotop">↑</a> <link rel="stylesheet" href="https://pptw.com/zb_users/plugin/social_share/css/share.min.css" /> <script src="https://pptw.com/zb_users/plugin/social_share/js/social-share.min.js"></script> <link rel="stylesheet" href="https://pptw.com/zb_users/plugin/Jz52_code/Jz52_code.css"><script src="https://pptw.com/zb_users/plugin/Jz52_code/clipboard.min.js"></script><script src="https://pptw.com/zb_users/plugin/Jz52_code/Jz52_code.js" type="text/javascript"/></script><!----> </body> </html><!--431.91 ms , 15 queries , 6341kb memory , 0 error-->
