html5frameset标签的替换方案有哪些？frameset标签替换的解决方

发布时间：09/01 来源：未知浏览：关键词：
本篇文章主要的介绍了对于html5frameset标签的替换方案实例解析，还有对于html5frameset标签的两个解决方法，此刻让我们一起来看这篇文章吧本篇文章主要的介绍了对于html5 frameset标签的替换方案实例解析，还有对于html5 frameset标签的两个解决方法，此刻让我们一起来看这篇文章吧
第一我们先看看html5 frameset标签的替换方案有哪些：
页面尽量少用 frameset 不利于被搜寻引擎搜寻到。
下面是在Visual Studio中对FrameSet与Frame的告诫提醒:
告诫验证 (XHTML 1.0 Transitional): 不支撑元素“frameset”。
告诫验证 (XHTML 1.0 Transitional): 不支撑元素“frame”。
新的HTML规范已经不支撑FrameSet与Frame元素,替换方式之一是用DIV配合IFrame与CSS替换FrameSet元素.IFrame依据不一样的内容,高宽自顺应其实很简略,但是许多人没有解决,其解决办法如下<即在onLoad方法中设置其高与宽即可>:




</pre><p>这么运用是在网上看到的比拼好的方案之一了。</p><p><strong>此刻我们介绍下对于frameset标签替换的解决方法：</strong>（html5不支撑frameset的，所以解决办法有下列两种）</p><p>1.运用iframe，但是当前运用iframe的人已经越来越少了，并且iframe在不一样阅读器之间还有不兼容的状况。</p><p>2.运用jQuery的onload办法加载页面，不外这种办法跳转多个页面后，点击阅读器上方的后退前进是无效的，不外可以以为的增加一个返回按钮。所以更流行的是这种办法：</p><p><strong>看看对于frameset标签的代码实例注明：</strong></p><pre class="brush:html;toolbar:false"><!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>div+css实现frameset结果</title>
        <style type="text/css">.header{border-bottom:1px solid #ccc;margin-bottom:5px;}
        .MainContainer{min-width:960px;max-width:1600px;}
        .sidebar{width:180px;float:left;margin-right:-180px;border-right:1px solid #ccc;min-height:500px;
        padding:5px;}.main{float:left;margin-left:200px;padding:5px;}
        .content{padding:0 10px;}
        </style>
    </head>
    <body>    
    
        <h1>顶部</h1>
        
        边栏
        内容
    
    </body>
</html></pre><p>上文代码运转结果如下：</p><p></p><p>html中的注释怎么写？html中的注释符号又有哪些？（附实例）<p>以上就是html5 frameset标签的替换方案有哪些？frameset标签替换的解决方法的细致内容，更多请关注 百分百源码网 其它相干文章！</p>    

    

    

    
       
          </div>
		   <meta http-equiv="Content-Type" content="text/html; charset=gbk" />
    <script type="text/javascript" src="http://www.baidow.com/ds/js/jquery.min.js"></script>
    <title>打赏</title>
    <style type="text/css">
        .content{width:100%;margin:0px auto;}
                .hide_box{z-index:999;filter:alpha(opacity=50);background:#666;opacity: 0.5;-moz-opacity: 0.5;left:0;top:0;height:99%;width:100%;position:fixed;display:none;}
        .shang_box{width:540px;height:540px;padding:10px;background-color:#fff;border-radius:10px;position:fixed;z-index:1000;left:50%;top:50%;margin-left:-280px;margin-top:-280px;border:1px dotted #dedede;display:none;}
        .shang_box img{border:none;border-width:0;}
        .dashang{display:block;width:100px;margin:5px auto;height:25px;line-height:25px;padding:10px;background-color:#E74851;color:#fff;text-align:center;text-decoration:none;border-radius:10px;font-weight:bold;font-size:16px;transition: all 0.3s;}
        .dashang:hover{opacity:0.8;padding:15px;font-size:18px;}
        .shang_close{float:right;display:inline-block;}
                .shang_logo{display:block;text-align:center;margin:20px auto;}
        .shang_tit{width: 100%;height: 75px;text-align: center;line-height: 66px;color: #a3a3a3;font-size: 16px;background: url('http://www.baidow.com/ds/img/cy-reward-title-bg.jpg');font-family: 'Microsoft YaHei';margin-top: 7px;margin-right:2px;}
        .shang_tit p{color:#a3a3a3;text-align:center;font-size:16px;}
        .shang_payimg{width:140px;padding:10px;border:6px solid #EA5F00;margin:0 auto;border-radius:3px;height:140px;}
        .shang_payimg img{display:block;text-align:center;width:140px;height:140px; }
        .pay_explain{text-align:center;margin:10px auto;font-size:12px;color:#545454;}
        .radiobox{width: 16px;height: 16px;background: url('http://www.baidow.com/ds/img/radio2.jpg');display: block;float: left;margin-top: 5px;margin-right: 14px;}
        .checked .radiobox{background:url('http://www.baidow.com/ds/img/radio1.jpg');}
        .shang_payselect{text-align:center;margin:0 auto;margin-top:40px;cursor:pointer;height:60px;width:280px;}
        .shang_payselect .pay_item{display:inline-block;margin-right:10px;float:left;}
        .shang_info{clear:both;}
		.shang_info p,.shang_info a{color:#C3C3C3;text-align:center;font-size:12px;text-decoration:none;line-height:2em;}

    </style>
</head>

<body>
    <div class="content">
    <p><a href="javascript:void(0)" onClick="dashangToggle()" class="dashang" title="打赏，支持一下">打赏</a></p>
    <div class="hide_box"></div>
    <div class="shang_box">
    	<a class="shang_close" href="javascript:void(0)" onClick="dashangToggle()" title="关闭"><img src="http://www.baidow.com/ds/img/close.jpg" alt="取消" /></a>
        <img class="shang_logo" src="http://www.baidow.com/ds/img/logos.png" alt="百分百源码网" />
    	<div class="shang_tit">
    		<p>感谢您的支持，我会继续努力的!</p>
    	</div>
    	<div class="shang_payimg">
    		<img src="http://www.baidow.com/ds/img/alipayimg.jpg" alt="扫码支持" title="扫一扫" />
    	</div>
    		<div class="pay_explain">扫码打赏，你说多少就多少</div>
    	<div class="shang_payselect">
    		<div class="pay_item checked" data-id="alipay">
	    		<span class="radiobox"></span>
	    		<span class="pay_logo"><img src="http://www.baidow.com/ds/img/alipay.jpg" alt="支付宝" /></span>
    		</div>
    		<div class="pay_item" data-id="weipay">
	    		<span class="radiobox"></span>
	    		<span class="pay_logo"><img src="http://www.baidow.com/ds/img/wechat.jpg" alt="微信" /></span>
    		</div>
    	</div>
    	<div class="shang_info">
    		<p>打开<span id="shang_pay_txt">支付宝</span>扫一扫，即可进行扫码打赏哦</p>
    		<p><a href="http://www.baidow.com" target="_blank" title="百分百源码网">百分百源码网</a> 建议打赏1～10元，土豪随意，感谢您的阅读！</p>
    	</div>
    </div>
    </div>
    <script type="text/javascript">
    $(function(){
    	$(".pay_item").click(function(){
    		$(this).addClass('checked').siblings('.pay_item').removeClass('checked');
    		var dataid=$(this).attr('data-id');
    		$(".shang_payimg img").attr("src","http://www.baidow.com/ds/img/"+dataid+"img.jpg");
    		$("#shang_pay_txt").text(dataid=="alipay"?"支付宝":"微信");
    	});
    });
    function dashangToggle(){
    	$(".hide_box").fadeToggle();
    	$(".shang_box").fadeToggle();
    }
    </script>
        </div>
        <div class="context mt1 clearfix">
          <ul>
            <li class="fl">上一篇：<a href='http://www.baidow.com/jiaocheng/html5jiaocheng/202009/49053.html'>html5datalist标签的用途有哪些？这里有datalist标签的用途实例-</a> </li>
            <li class="fr">下一篇：<a href='http://www.baidow.com/jiaocheng/html5jiaocheng/202009/49055.html'>html5header标签如何用？html5header标签的作用介绍-</a> </li>
          </ul>
        </div>
      </div>
      <div class="relatenews">
        <div class="tit">
          <h3>相关文章<span></span></h3>
        </div>
        <ul class="list2 clearfix">
          <li><a target="_blank" href="http://www.baidow.com/jiaocheng/html5jiaocheng/202101/75739.html">html中的锚点是啥</a></li>
<li><a target="_blank" href="http://www.baidow.com/jiaocheng/html5jiaocheng/202101/75736.html">HTML中的标签textarea的属性是什么</a></li>
<li><a target="_blank" href="http://www.baidow.com/jiaocheng/html5jiaocheng/202101/74960.html">支撑onload事件的HTML标签是什么</a></li>
<li><a target="_blank" href="http://www.baidow.com/jiaocheng/html5jiaocheng/202101/74948.html">HTML中type有哪些意思</a></li>
<li><a target="_blank" href="http://www.baidow.com/jiaocheng/html5jiaocheng/202101/74944.html">html input有哪些</a></li>
<li><a target="_blank" href="http://www.baidow.com/jiaocheng/html5jiaocheng/202101/74940.html">html运用什么来描述网页？</a></li>
<li><a target="_blank" href="http://www.baidow.com/jiaocheng/html5jiaocheng/202012/74489.html">html最外层元素有哪些？</a></li>
<li><a target="_blank" href="http://www.baidow.com/jiaocheng/html5jiaocheng/202012/74328.html">html怎么引入图片</a></li>

        </ul>
      </div>
      <div id="plq" class="mt2">
  <div class="plqt"><span>共有<b>150</b>人阅读，期待你的评论！</span>发表评论</div>
  <form action="/" method="post" name="feedback">
    <div class="plk">
      <input type="hidden" name="dopost" value="send" />
      <input type="hidden" name="comtype" value="comments">
      <input type="hidden" name="aid" value="49054" />
      <input type="hidden" name="fid" id='feedbackfid' value="0" />
      <textarea name="msg" class="ipt-txt2"></textarea>
    </div>
    <div class="dcmp-post">
      <div class="dcmp-userinfo" id="_ajax_feedback">昵称：
        <input name="username" type="text" size="10"/>
		网址：<input name="userweb" type="text" />
        验证码：
        <input name="validate" type="text" id="validate" size="4" style="height:18px;width:65px;text-transform: uppercase;" />
        <img src='/' style='cursor:pointer' id='validateimg' onclick="this.src=this.src+'?'"  title='点击我更换图片' alt='点击我更换图片' />
        <div class='dcmp-submit'>
          <button type='button' onClick='PostComment()'>发表</button>
        </div>
      </div>
    </div>
  </form>
  <a name='commettop'></a>
  <div class="feedbox clearfix">
    <div class="plqt-2">最新评论</div>
    <div id='commetcontentNew'></div>
    <div id='commetcontent'></div>
  </div>
</div>
 </div>
      <div class="sidec">
      <div class="tags">
        <div class="tit">
          <h3>本文标签<span></span></h3>
        </div>
        <div class="cont"></div>
      </div>
      <a id="JRightMark" href=""></a>
      <div id="JRigthFlow">
        <div class="ad mt2">
          <div class="tit">
            <h3>广告赞助</h3>
          </div>
          <div class="clearfix">能出一分力是一分吧！</div>
        </div>
        <div class="dingyue mt2">
          <div class="tit">
            <h3>订阅获得更多模板<span></span></h3>
          </div>
            <input name="t" value="qf_booked_feedback" type="hidden">
            <input name="id" value="421cabea0768cc0f34489547656f8defea828c8668587c0b" type="hidden">
            <input id="to" onfocus="if (this.value == '输入QQ邮箱 获得更多模板') {this.value = '';}" onblur="if (this.value == '') {this.value = '输入QQ邮箱 获得更多模板';}" value="输入QQ邮箱 获得更多模板" name="to" class="feed-mail-input" type="text">
            <input class="feed-mail-btn" value="订 阅" type="submit">
        </div>
      </div>
    <div class="sidec">
      <div class="tags">
        <div class="tit">
          <h3>本文标签<span></span></h3>
        </div>
        <div class="cont"></div>
      </div>
      <a id="JRightMark" href=""></a>
      <div id="JRigthFlow">
        <div class="ad mt2">
          <div class="tit">
            <h3>广告赞助</h3>
          </div>
          <div class="clearfix">
          </div>
        </div>
        <div class="dingyue mt2">
          <div class="tit">
            <h3>订阅获得更多模板<span></span></h3>
          </div>
          <form class="feed-mail" action="http://list.qq.com/cgi-bin/qf_compose_send" target="_blank" method="post">
            <input name="t" value="qf_booked_feedback" type="hidden">
            <input name="id" value="#" type="hidden">
            <input id="to" onfocus="if (this.value == '输入QQ邮箱 获得更多模板') {this.value = '';}" onblur="if (this.value == '') {this.value = '输入QQ邮箱 获得更多模板';}" value="输入QQ邮箱 获得更多模板" name="to" class="feed-mail-input" type="text">
            <input class="feed-mail-btn" value="订 阅" type="submit">
          </form>
        </div>
      </div>
    </div></div>
</div>
<!--底部信息-->
<div class="footer_o">
<div class="footer">
<div class="footer_i">
   <p><a href="/help/about.html">关于我们</a>-<a href="/help/mianze.html">免责声明</a>-<a href="#">业务报价</a>-<a href="#">广告服务</a>-意见反馈-<a href="#">常见问题</a>-<a href="/sitemap_wz1.html">网站地图</a></p>
   <p>百分百源码网声明：本站所有模板文章除标明原创外，均来自网络转载，版权归作者所有，如果有侵犯权益，请联系本站删除！</p>
   <p>Copyright &#169; 2021 完整无错带数据网站源码模板下载平台! WWW.BAIDOW.COM. 
</p>
</div>
</div><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>
</div>
</body>
</html>