编辑下面的代码:【加编码】
<html lang="zh-CN"> <head> <title>ziqiangxuetang在线编辑器</title> <meta id="viewport" name="viewport"> <script> (function() { if ( navigator.userAgent.match(/iPad/i) ) { document.getElementById('viewport').setAttribute("content", "width=device-width, initial-scale=0.9"); } }()); </script> <link rel="stylesheet" type="text/css" href="/try/trycss.css"> <!--[if lt IE 8]> <style> .textareacontainer, .iframecontainer {width:48%;} .textarea, .iframe {height:800px;} #textareaCode, #iframeResult {height:700px;} .menu img {display:none;} </style> <![endif]--> <script type="text/javascript"> function submitTryit() { var t=document.getElementById("textareaCode").value; t=t.replace(/=/gi,"w3equalsign"); var pos=t.search(/script/i) while (pos>0) { t=t.substring(0,pos) + "w3" + t.substr(pos,3) + "w3" + t.substr(pos+3,3) + "tag" + t.substr(pos+6); pos=t.search(/script/i); } if ( navigator.userAgent.match(/Safari/i) ) { t=escape(t); document.getElementById("bt").value="1"; } document.getElementById("code").value=t; document.getElementById("tryitform").action="/demo/result.php?x=" + Math.random(); validateForm(); document.getElementById("iframeResult").contentWindow.name = "view"; document.getElementById("tryitform").submit(); } function validateForm() { var code=document.getElementById("code").value; if (code.length>10000) { document.getElementById("code").value="<h1>Error:提交数据超标啦!</h1>"; } } </script> <style> .resultHeader { padding-top:15px; } .textareacontainer, .iframecontainer { height:49%; float:none; width:98%; } .textarea, .iframe { position:relative; width:100%; margin:0; height:99%; } .container { min-width:260px; } </style> </head><body> <div id="ads"> <div style="position:relative;width:100%;margin-top:0px;margin-bottom:0px;"> <div style="width:974px;height:94px;position:relative;margin:0px;margin-top:5px;margin-bottom:5px;margin-right:auto;margin-left:auto;padding:0px;overflow:hidden;"> <script async src="http://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <ins class="adsbygoogle" style="display:inline-block;width:970px;height:90px" data-ad-client="ca-pub-5751451760833794" data-ad-slot="6979016065"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> <div style="clear:both"></div> </div> </div> </div> <div class="container"> <div class="textareacontainer"> <div class="textarea"> <div class="headerText" style="width:auto;float:left;">源代码:</div> <div class="headerBtnDiv" style="width:auto;float:right;margin-top:8px;margin-right:2.4%;"><button class="submit" type="button" onclick="submitTryit()">提交运行 »</button></div> <div class="textareawrapper"> <textarea autocomplete="off" class="code_input" id="textareaCode" wrap="logical" xrows="30" xcols="50">&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;Bootstrap 实例 - 如何使用字形图标(Glyphicons)&lt;/title&gt; &lt;link href="https://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"&gt; &lt;script src="https://libs.baidu.com/jquery/2.0.0/jquery.min.js"&gt;&lt;/script&gt; &lt;script src="https://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"&gt;&lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;p&gt; &lt;button type="button" class="btn btn-default"&gt; &lt;span class="glyphicon glyphicon-sort-by-attributes"&gt;&lt;/span&gt; &lt;/button&gt; &lt;button type="button" class="btn btn-default"&gt; &lt;span class="glyphicon glyphicon-sort-by-attributes-alt"&gt;&lt;/span&gt; &lt;/button&gt; &lt;button type="button" class="btn btn-default"&gt; &lt;span class="glyphicon glyphicon-sort-by-order"&gt;&lt;/span&gt; &lt;/button&gt; &lt;button type="button" class="btn btn-default"&gt; &lt;span class="glyphicon glyphicon-sort-by-order-alt"&gt;&lt;/span&gt; &lt;/button&gt; &lt;/p&gt; &lt;button type="button" class="btn btn-default btn-lg"&gt; &lt;span class="glyphicon glyphicon-user"&gt;&lt;/span&gt; User &lt;/button&gt; &lt;button type="button" class="btn btn-default btn-sm"&gt; &lt;span class="glyphicon glyphicon-user"&gt;&lt;/span&gt; User &lt;/button&gt; &lt;button type="button" class="btn btn-default btn-xs"&gt; &lt;span class="glyphicon glyphicon-user"&gt;&lt;/span&gt; User &lt;/button&gt; &lt;/body&gt; &lt;/html&gt;</textarea> <form autocomplete="off" style="margin:0px;display:none;" action="/demo/result.php" method="post" target="view" id="tryitform" name="tryitform" onsubmit="validateForm();"> <input type="hidden" name="code" id="code"> <input type="hidden" id="bt" name="bt"> </form> </div> </div> </div> <div class="iframecontainer"> <div class="iframe"> <div class="headerText resultHeader">测试结果:</div> <div class="iframewrapper"> <iframe id="iframeResult" class="result_output" frameborder="0" name="view" xsrc="demo_source/bootstrap3-glyphicons.htm"></iframe> </div> <div class="footerText">尝试一下 - © <a href="/">ziqiangxuetang.com</a></div> </div> </div> </div> <script>submitTryit();</script> <div style="display:none;"> <script src="http://s11.cnzz.com/stat.php" language="JavaScript"></script> </div> </body> </html>
结果: 【此窗口】 帮助?
Try it Yourself - © 自强学堂