浏览器编辑HTML

运行效果：

浏览器编辑HTML

test.html

HTML源码：

<html>
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
    <title>浏览器编辑HTML</title> 
    <script language="JavaScript" type="text/JavaScript"> 
//运行文本域代码
function runEx(cod1) {
    cod=document.all(cod1)
    var code=cod.value;
    if(code==""){
        alert('内容为空，请输入内容！');
    }
    if (code!=""){
  var newwin=window.open('','',''); //打开一个窗口并赋给变量newwin。
 newwin.opener = null // 防止代码对论谈页面修改
 newwin.document.write(code); //向这个打开的窗口中写入代码code，这样就实现了运行代码功能。
 newwin.document.close();
}
}
function quickdelete(cod2){    
    cod=document.all(cod2)
    var code=cod.value;
    if(code==""){
        alert('无需重复点击，内容已经为空！');
    }  
           document.getElementById(cod2).value ="";
         }
</script>
<style type="text/css">
    .boxes{
        text-align: left;
        font-size: 18px; 
        width: 1150px;
        height: 400px;
        color: #4d90fe;
        font-weight: bold;
        margin-left: 100px;
        background: #f3f7fc;
        border: 1px solid #4d90fe;
        border-radius: 3px 3px 3px 3px;
    }
    .boxes2{
        text-align: left;
        font-size: 18px; 
        width: 1150px;
        height: 300px;
        color: #4d90fe;
        font-weight: bold;
        margin-left: 100px;
        background: #f3f7fc;
        border: 1px solid #4d90fe;
        border-radius: 3px 3px 3px 3px;
    }
    .run_btn {
        border-radius: 3px 3px 3px 3px;
        background: #4d90fe;
        border: 1px solid #4d90fe;
        display: inline-block;
        vertical-align: middle;
        color: #f3f7fc;
        font-weight: bold;
        width: 100px;
        font-size: 18px;
        height: 41px;
        cursor: hand;
    }
    .run_btn:hover{background:#1874CD} 

    .delete_btn{
    border-radius: 3px 3px 3px 3px;
    background: #F0CB85;
    border: 1px solid #F0CB85;
    cursor: pointer;
    display: inline-block;
    vertical-align: middle;
    color: #DC143C;
    font-weight: bold;
    width: 100px;
    font-size: 18px;
    height: 41px;
  }
  .delete_btn:hover{background:#DEB887} 

  .cen{
  text-align: center;
  }

  *{
 margin: 0;
 padding: 0;
}
 
li{
 background: #EEE;
 line-height: 24px;
 display: block;
 position: relative;
 color:red;
}
 
li a{
 line-height: 24px;
 display: block;
 color: red;
 margin-left: 20px;
 text-align: center;
}

li a:hover{
 color: red;
}
 
ul li input[type="checkbox"]{
 position: absolute;
 top: 0;
 width: 100%;
 height: 24px;
 opacity: 0;
 cursor: hand;
}
 
ul li input[type="checkbox"]:not(:checked) + ul {
 display: none;
 cursor: hand;
}

#text{
font-size:20px;
margin-left:200px;
color:red;
cursor: hand;
}

</style>
</head>  
<body background="http://images2015.cnblogs.com/blog/512541/201511/512541-20151124231305937-1592292858.jpg" bgproperties="fixed" style="background: #f3f7fc;" 
>
<p style="text-align: center;color: blue;font-weight: bold;">test.html</p>
<textarea class="boxes" name="textarea" cols="100" rows="26" id="rn01">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>浏览器HTML运行</title>
</head>
<body>

<h1>请输入你想要输入的内容</h1>
<p>内容最好不要为空，否则没有显示效果</p>

</body>
</html>
</textarea>
<hr />
<form class="cen">
<input class="run_btn" onClick="runEx('rn01')" type="button" value="运行代码">
<input class="delete_btn" onClick="quickdelete('rn01')" type="button" value="清空代码">
</form>
        <ul>
        <li><a>不想写开头，参考一下HTML开头吧！</a>
            <input type="checkbox" name="list" />
            <ul>
                <li>
<textarea class="boxes2">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
</head>
<body>

<h1>请输入你想要输入的内容</h1>
<p>内容最好不要为空，否则没有显示效果</p>
  
</body>
</html>
</textarea>
</li>
<li><a href="http://www.cnblogs.com/tufujie" target="_blank" title="点击进入追梦人...博客首页">如有疑问，可直接访问：追梦人...博客首页</a></li>
            </ul>
        </li>
        </ul>
</body> 
</html>
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/tufujie/p/5072086.html