iframe的使用和例子「iframe用在哪及用法详解」

文章作者:seo优化大师 文章来源:港翔seo优化发布时间:2022/10/4 13:32:41 浏览量:

本文导读:大家平常有独立建站或者经常和网站制作打交道，那肯定对iframe不陌生。 iframe是网页制作常用的一种标签，它可以使网站结构变得更加清晰、合理、美观大气。那么iframe应该怎么用？iframe写法有哪些呢?标签ifra</p><p>大家平常有独立建站或者经常和网站制作打交道，那肯定对iframe不陌生。 iframe是网页制作常用的一种标签，它可以使网站结构变得更加清晰、合理、美观大气。那么iframe应该怎么用？iframe写法有哪些呢?</p><p><iframe>标签iframe标签是框架的一种形式，也比较常用到，iframe一般用来包含别的页面，例如我们可以在我们自己的网站页面加载别人网站或者本站其他页面的内容。iframe标签的最大作用就是让页面变得美观。iframe标签的用法有很多，主要区别在于对iframe标签定义的形式不同，例如定义iframe的长、宽、高。</p><p>iframe写法详解： </p><p>iframe标签的写法与大多HTML标签写法相同，输入形式为：<iframe>和</iframe>。以<iframe>开头，以</iframe>结尾，将需要的文本内容添加到两个标签之间即可。iframe标签内的内容可以做为浏览器不支持iframe标签时显示。 </p><p>iframe标签属性 </p><p>iframe标签属性主要是align：left、right、top、middle、bottom，用于规定根据周围的元素对齐框架。目前用iframe标签修改框架对齐方式的很少，不建议使用，通常都是用div+css样式代替。具体属性介绍如下: </p><p>frameborder：1、0。用于规定是否显示框架周围的边框。 </p><p>height：pixels、%。用于规定iframe的高度。 </p><p>longdesc：URL。规定一个页面，该页面包含了有关iframe的较长描述。 </p><p>marginheight：pixels。定义iframe的顶部和底部的边距。 </p><p>marginwidth：pixels。定义iframe的左侧和右侧的边距。 </p><p>name：frame_name。规定iframe的名称。 </p><p>scrolling：yes、no、auto。规定是否在iframe中显示滚动条。 </p><p>src：URL。规定在iframe中显示的文档的URL。 </p><p>width：pixels。%。定义iframe的宽度。 </p><p>下面举例说明iframe的具体用法： </p><p>例1 </p><p><iframe width=420 height=330 frameborder=0 scrolling=auto src=URL></iframe> </p><p>width插入页的宽；height插入页的高；scrolling 是否显示页面滚动条（可选的参数为 auto、yes、no，如果省略这个参数，则默认为auto）；frameborder 边框大小； </p><p>注意：URL建议用绝对路径 </p><p>传说中百度用：<iframe width=0 height=0 frameborder=0 scrolling=auto src=www.enkj.com></iframe> </p><p>例2 </p><p>如果一个页面里面有框架。随便点页面里的连接，要求在这个<iframe> 里打开。在iframe 中加入name=** （**自己设定） </p><p><iframe name=** ></iframe> </p><p>然后在修改默认打开模式，：网页HEAD中加上<a href=URL target=**>或部分连接的目标框架设为（**） </p><p>以上就是iframe常用的写法和用法，也还有其他的用法，比如透明的iframe的用法，这个必需IE5.5以上版本才支持，这里就不做具体介绍，大家可以自行了解。 </p><p class="nrybanquan"><strong>版权保护</strong>: 本文由 seo优化大师转载于网络，版权归原作者所有，如有侵权请联系 <a href="http://wpa.qq.com/msgrd?v=3&uin=54540816&site=qq&menu=yes" rel="nofollow">seo优化大师</a> 删除<br>转载请保留链接:[iframe的使用和例子「iframe用在哪及用法详解」] <a href="/seo/1803.html" title="iframe的使用和例子「iframe用在哪及用法详解」">http://www.qqsn.com.cn/seo/1803.html</a></p></div> </div>   </article>  <nav class="nav-single"> <span class="nav-previous"> 上一篇：<a href="/seo/1802.html" title="虚拟机能ping通主机,主机ping不通虚拟机「方案」">虚拟机能ping通主机,主机ping不通虚拟机「方案」</a> </span> <span class="nav-next"> 下一篇：<a href="/seo/1804.html" title="网站服务器租赁一般多少钱「双线服务器租赁」">网站服务器租赁一般多少钱「双线服务器租赁」</a> </span> </nav> <div class="nryxgwz"> <div class="nryxgwzh3"><h3>读了iframe的使用和例子「iframe用在哪及用法详解」99%还在读</h3></div> <ul> </ul> </div>  <div class="clear"></div>  </div>   <aside id="sitebar"> <div class="btn-box"> <h3><a href="http://wpa.qq.com/msgrd?v=3&uin=54540816&site=qq&menu=yes" target="_blank" rel="nofollow">免费诊断</a></h3> </div>  <div class="sitebar_list"> <h3 class="sitebar_title">seo导航</h3> <ul class="sitebar_list_ul"> <li><a target="_blank" title="seo优化" href="/seoyh/">seo优化</a></li> <li><a target="_blank" title="网站优化" href="/wzyh/">网站优化</a></li> <li><a target="_blank" title="seo推广" href="/seotg/">seo推广</a></li> <li><a target="_blank" title="seo技术" href="/seojq/">seo技术</a></li> <li><a target="_blank" title="seo经验" href="/seojy/">seo经验</a></li> <li><a target="_blank" title="seo学习" href="/seoxx/">seo学习</a></li> <li><a target="_blank" title="关键词优化" href="/gjcyh/">关键词优化</a></li> <li><a target="_blank" title="黑帽seo" href="/hmseo/">黑帽seo</a></li> <li><a target="_blank" title="网站建设优化" href="/wzjsseo/">网站建设优化</a></li> <li><a target="_blank" title="关键词排名" href="/gjcpm/">关键词排名</a></li> <li><a target="_blank" title="seo外链" href="/seowl/">seo外链</a></li> <li><a target="_blank" title="网站降权" href="/wzjq/">网站降权</a></li> <li><a target="_blank" title="网站权重" href="/wzqz/">网站权重</a></li> <li><a target="_blank" title="网站不收录" href="/wzbsl/">网站不收录</a></li> <li><a target="_blank" title="优化算法" href="/seosf/">优化算法</a></li> <li><a target="_blank" title="seo文章优化" href="/seowzyh/">seo文章优化</a></li> <li><a target="_blank" title="seo排名工具" href="/seosoft/">seo排名工具</a></li> <li><a target="_blank" title="SEO教程" href="/seojc/">SEO教程</a></li> <li><a target="_blank" title="seo怎么优化" href="/seozmyh/">seo怎么优化</a></li> <li><a target="_blank" title="福州seo" href="/fzseo/">福州seo</a></li> <li><a target="_blank" title="快速排名" href="/kspm/">快速排名</a></li> <li><a target="_blank" title="百度优化" href="/bdyh/">百度优化</a></li> </ul> </div> <div class="sitebar_list"> <h3 class="sitebar_title">猜你喜欢</h3> <ul class="sitebar_list_ul"> <li><a target="_blank" title="「王钊seo」视频培训教程之seo标题写法" href="/seo/430.html">「王钊seo」视频培训教程之seo标题写法</a></li><li><a target="_blank" title="调用iframe中的方法「iframe的用法HTML属性有哪些」" href="/seo/1746.html">调用iframe中的方法「iframe的用法HTML属性有哪些」</a></li><li><a target="_blank" title="百度统计的主要功能有「百度统计提供了哪些分析功能" href="/seo/2092.html">百度统计的主要功能有「百度统计提供了哪些分析功能</a></li><li><a target="_blank" title="tracert命令的作用和使用方法「指定最大TTL使用命令" href="/seo/1908.html">tracert命令的作用和使用方法「指定最大TTL使用命令</a></li><li><a target="_blank" title="slogan是什么意思「一句吸引人的slogan」" href="/seo/2500.html">slogan是什么意思「一句吸引人的slogan」</a></li><li><a target="_blank" title="scqa模型是什么「SCQA模型论文举例」" href="/seo/2630.html">scqa模型是什么「SCQA模型论文举例」</a></li><li><a target="_blank" title="CDN基于哪种原理实现「cdn原理与流媒体技术」" href="/seo/1942.html">CDN基于哪种原理实现「cdn原理与流媒体技术」</a></li><li><a target="_blank" title="微博实用工具详解下载「消息管理软件哪个好」" href="/seo/1052.html">微博实用工具详解下载「消息管理软件哪个好」</a></li><li><a target="_blank" title="微信运营九式及标题的101种写法是什么「怎么写」" href="/seo/1927.html">微信运营九式及标题的101种写法是什么「怎么写」</a></li><li><a target="_blank" title="需求预测模型「马斯洛模型解析」" href="/seo/2638.html">需求预测模型「马斯洛模型解析」</a></li> </ul> </div> <div class="sitebar_list"> <h3 class="sitebar_title">还没看够</h3>   </div> <script type="text/javascript"> var mt = 0; window.onload = function () { var mydiv = document.getElementById("mydiv"); var mt = mydiv.offsetTop; window.onscroll = function () { var t = document.documentElement.scrollTop || document.body.scrollTop; if (t > mt) { mydiv.style.position = "fixed"; mydiv.style.margin = "0 0px"; mydiv.style.top = "0"; } else { mydiv.style.margin = "0px 0px"; mydiv.style.position = "static"; } } } </script> </aside>  <div class="clear"></div> </div>  <footer id="dibu"> <div class="about"> <div class="right"> <ul id="menu-bottom-nav" class="menu"> <li class="menu-item menu-item-type-post_type menu-item-object-page"><a target="_blank" href="https://www.xminseo.com/" rel="nofollow">seo</a></li> <li class="menu-item menu-item-type-post_type menu-item-object-page"><a target="_blank" href="http://www.seodayu.com/" rel="nofollow">seo优化</a></li> <li class="menu-item menu-item-type-post_type menu-item-object-page"><a target="_blank" href="/">seo</a></li> <li class="menu-item menu-item-type-post_type menu-item-object-page"><a target="_blank" href="https://www.eqiseo.com/" rel="nofollow">seo优化公司</a></li> <li class="menu-item menu-item-type-post_type menu-item-object-page"><a target="_blank" href="http://www.seokspm.com/index.html" rel="nofollow">网站优化</a></li> </ul> <p class="banquan"> 港翔seo优化，专注seo优化那点事儿！</p> </div> <div class="left"> <ul class="bottomlist"> <li> <a href="/" rel="nofollow" target="_blank"><img width="35" height="35" src="/images/weibo.png" alt="新浪微博"></a> </li> <li> <a href="/" rel="nofollow" class="cd-popup-trigger"><img width="35" height="35" src="/images/weixin.png" alt="微信公众号"></a> </li> </ul> </div> </div>  <div class="bottom"> <div class="text"><span>福州企业想招聘个<a href="/">seo</a>优化顾问,担心找到的专业技术不过硬,外包给福州<a href="/seoyh/">seo优化</a>公司是否担心手法不正规、报价超预算、使用黑帽手段提升排名,影响后期被降权?港翔15年网站建设经验,8年福州seo服务经验,「百分百正规手法」0-1搜索引擎关键词优化排名上首页,价格合理公道,详情可咨询在线客服。<br></span><a class="plan_btn" target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=54540816&site=qq&menu=yes" rel="nofollow">在线客服</a> </div> <a href="javascript:;" target="_blank" rel="nofollow">Copyright © 2006-2020 www.qqsn.com.cn 港翔seo优化版权所有</a> <a href="/" target="_blank" rel="nofollow">Power by www.qqsn.com.cn</a> <a href="http://www.beian.miit.gov.cn" target="_blank" rel="nofollow">闽ICP备12003511号-4</a> <link rel="stylesheet" href="/images/zxkf.css"> <div class="suspension"> <div class="suspension-box"> <a href="#" class="a a-service " rel="nofollow"><i class="i"></i></a>  <a href="javascript:;" class="a a-qrcode" rel="nofollow"><i class="i"></i></a> <a href="#" class="a a-cart" rel="nofollow"><i class="i"></i></a> <a href="javascript:;" class="a a-top" rel="nofollow"><i class="i"></i></a> <div class="d d-service"> <i class="arrow"></i> <div class="inner-box"> <div class="d-service-item clearfix"> <a href="https://wpa.qq.com/msgrd?v=3&uin=54540816&site=qq&menu=yes" class="clearfix" rel="nofollow"><span class="circle"><i class="i-qq"></i></span><h4>咨询福州seo客服</h4></a> </div> </div> </div> <div class="d d-qrcode"> <i class="arrow"></i> <div class="inner-box"> <div class="qrcode-img"><img src="/images/gzh.jpg" alt="微信服务号"></div> <p>微信服务号</p> </div> </div> </div> </div> <script type="text/javascript" src="/js/jquery-1.7.2.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ /* ----- 侧边悬浮 ---- */ $(document).on("mouseenter", ".suspension .a", function(){ var _this = $(this); var s = $(".suspension"); var isService = _this.hasClass("a-service"); var isServicePhone = _this.hasClass("a-service-phone"); var isQrcode = _this.hasClass("a-qrcode"); if(isService){ s.find(".d-service").show().siblings(".d").hide();} if(isServicePhone){ s.find(".d-service-phone").show().siblings(".d").hide();} if(isQrcode){ s.find(".d-qrcode").show().siblings(".d").hide();} }); $(document).on("mouseleave", ".suspension, .suspension .a-top", function(){ $(".suspension").find(".d").hide(); }); $(document).on("mouseenter", ".suspension .a-top", function(){ $(".suspension").find(".d").hide(); }); $(document).on("click", ".suspension .a-top", function(){ $("html,body").animate({scrollTop: 0}); }); $(window).scroll(function(){ var st = $(document).scrollTop(); var $top = $(".suspension .a-top"); if(st > 400){ $top.css({display: 'block'}); }else{ if ($top.is(":visible")) { $top.hide(); } } }); }); </script> <script> document.body.oncopy = function () { setTimeout( function () { var text = clipboardData.getData("text"); if (text) { text = text + "该数据来源于:港翔seo优化。[原文地址]："+location.href; clipboardData.setData("text", text); } }, 100 ) } </script> <script> (function(){ var bp = document.createElement('script'); var curProtocol = window.location.protocol.split(':')[0]; if (curProtocol === 'https') { bp.src = 'https://zz.bdstatic.com/linksubmit/push.js'; } else { bp.src = 'http://push.zhanzhang.baidu.com/push.js'; } var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(bp, s); })(); </script>  <div class="tongji"> </div>  </div> </footer> </div> <script src="/js/html5shiv.js"></script> <script src="/js/css3-mediaqueries.js"></script> <script src="/js/selectivizr-min.js"></script> <script src="/js/jquery.1.11.1.js" type="text/javascript"></script> <script type="text/javascript" src="/js/j-min.js"></script> <script type="text/javascript"> function autoScroll(obj){ $(obj).find("ul").animate({ marginTop : "-140px" },500,function(){ $(this).css({marginTop : "0px"}).find("li:first").appendTo(this); }) } $(function(){ setInterval('autoScroll(".maquee")',4000); setInterval('autoScroll(".zhidingyi")',2000); }) </script> <script> $(function () { var w = 0; var tem = 0; var btn = false; $('.box').find('a').each(function () { w = w + $(this).width(); }) $('.box').width(w); setInterval(function () { if (btn) { return; } tem = tem + 1; $('.scroll').scrollLeft(tem); if ($('.scroll').scrollLeft() < tem) { tem = 0; } }, 20); $('.scroll').on('mouseenter', function () { btn = true; }) $('.scroll').on('mouseleave', function () { btn = false; }) }) </script> </body> </html> <script src="/ks_inc/ajax.js" type="text/javascript"></script>