是什么？html中iframe标签的用法详解 </h1> <div class="wz_info"> <span class="wz_frome"> <a href="/" target="_blank" title="程序员文章站"> 程序员文章站 </a> </span> <span class="wz_time"> 2022-03-19 11:48:49 </span> </div> <div class="wz_smalltext"> ...</div> <div class="content"> 经常进行页面布局的人对于HTML中的iframe标签一定不陌生，iframe标签是一个内联框架，说白了就是用来在当前 HTML 页面中嵌入另一个文档的。刚刚接触前端的小伙伴可能不知道html中iframe标签的用法，这篇文章就结合实例给大家讲解html中iframe标签的使用用法，有一定的参考价值，感兴趣的朋友可以看看。<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><img onerror="this.src='/statics/superweb999/images/image_error.jpg'"title="<iframe>是什么？html中iframe标签的用法详解" alt="<iframe>是什么？html中iframe标签的用法详解" src="/default/index/img?u=aHR0cHM6Ly9pbWcucGhwLmNuLy91cGxvYWQvaW1hZ2UvNDI1LzIyNi80ODcvMTU0MDUxOTYxNzU5MjA5MC5qcGc="></p> <p>没有边框和滚动条的效果图：</p> <p><img onerror="this.src='/statics/superweb999/images/image_error.jpg'"title="<iframe>是什么？html中iframe标签的用法详解" alt="<iframe>是什么？html中iframe标签的用法详解" src="/default/index/img?u=aHR0cHM6Ly9pbWcucGhwLmNuLy91cGxvYWQvaW1hZ2UvNTgxLzcyNi85MDAvMTU0MDUxOTYzOTY4NDQ2MS5qcGc="></p> <p>当页面中有大部分内容相同时，比如页面的头部和底部，我们就可以使用<iframe>标签将重复的部分嵌入页面中，这样可以减少代码的重复率，减轻代码量，但不足之处是页面url地址没有改变。</p> <p>以上结合实例给大家介绍了html中<iframe>标签的使用方法，小白一定要自己动手尝试，看看你的代码能不能实现这样的效果，希望这篇文章对你有所帮助！</p> <p>【相关教程推荐】</p> <p>1. <a href="http://www.php.cn/course/list/11.html" target="_blank" rel="nofollow">HTML教程</a><br>2. <a href="http://www.php.cn/course/list/13.html" target="_blank" rel="nofollow">Html5视频教程</a><br>3. <a href="http://www.php.cn/course/list/15.html" target="_blank" rel="nofollow">bootstrap教程 </a></p> <p>以上就是<iframe>是什么？html中iframe标签的用法详解的详细内容，更多请关注其它相关文章！</p> </div> <div class="tags"> 相关标签： <a href="/t/html/" target="_blank"> html </a> <a href="/t/iframe/" target="_blank"> iframe </a> </div> <div class="info-pre-next"> <p> 上一篇： <a href="/article/244117.html"> caption标签什么意思使用方法介绍（附代码） </a> </p> <p> 下一篇： <a href="/article/244119.html"> html中mark标签的使用方法详解（附代码） </a> </p> </div> <div class="wz_tuijian"> <p> 推荐阅读 </p> <ul> <li> <a href="/article/2254060.html" target="_blank" title="详解HTML5中的<template>标签"> <h2> 详解HTML5中的<template>标签 </h2> </a> </li> <li> <a href="/article/2207824.html" target="_blank" title="详解HTML5中的<template>标签"> <h2> 详解HTML5中的<template>标签 </h2> </a> </li> <li> <a href="/article/2196754.html" target="_blank" title="HTML5移动端开发中的Viewport标签及相关CSS用法解析"> <h2> HTML5移动端开发中的Viewport标签及相关CSS用法解析 </h2> </a> </li> <li> <a href="/article/2185442.html" target="_blank" title="浅析HTML5中header标签的用法"> <h2> 浅析HTML5中header标签的用法 </h2> </a> </li> <li> <a href="/article/2170489.html" target="_blank" title="详解Html a标签中href和onclick用法、区别、优先级别"> <h2> 详解Html a标签中href和onclick用法、区别、优先级别 </h2> </a> </li> <li> <a href="/article/2030822.html" target="_blank" title="html中的a标签详解"> <h2> html中的a标签详解 </h2> </a> </li> <li> <a href="/article/2028872.html" target="_blank" title="iframe中的a标签电话链接不能正常打开"> <h2> iframe中的a标签电话链接不能正常打开 </h2> </a> </li> <li> <a href="/article/2018076.html" target="_blank" title="详解HTML5中ol标签的用法"> <h2> 详解HTML5中ol标签的用法 </h2> </a> </li> <li> <a href="/article/2012078.html" target="_blank" title="HTML中的标题<h1>标签的用法！"> <h2> HTML中的标题<h1>标签的用法！ </h2> </a> </li> <li> <a href="/article/2011063.html" target="_blank" title="IE中iframe标签显示在DIV之上的问题解决方案"> <h2> IE中iframe标签显示在DIV之上的问题解决方案 </h2> </a> </li> </ul> </div> </article> </div> </main> <footer><div class="box"><div class="ft_nav"><div class="ft_about"><p>关于网站</p><ul><li><a href="/sitemap.xml" target="_blank" title="网站地图">网站地图</a></li><li><a href="/list/2/" title="最新程序员文章站">最新程序员文章站</a></li></ul></div><div class="ft_contact"><ul><li>本站所有数据收集于网络如有侵犯到您的权益，请联系我们进行下架处理。</li><li class="email_show"></li></ul></div></div><div class="copyright"><div class="cr_left"><p> 备案号：<a href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank">粤ICP备20058927号</a></p><p>© Copyright © 2020-2022 www.superweb999.com 程序员文章站. </p></div></div></div></footer> </body> </html>