运行效果：

浏览器编辑HTML

test.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

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>

浏览器编辑HTML的更多相关文章

  1. 浏览器编辑web页面的方法

    F12打开控制台执行 document.body.contentEditable='true'; 这样就可以随便修改了

  2. 在线office文档编辑NTKO使用心得

    目录 前言 什么是ntko 准备工作 实战演练 总结 一.前言 Web开发中经常需要用到在线处理office文档的功能,现在市面上有一些常用的Web页面调用显示Office的控件技术,用起来很方便.有 ...

  3. 关于Anaconda安装以后使用Jupyter Notebook无法直接打开浏览器的解决方法

    关于Anaconda安装以后使用Jupyter Notebook无法直接打开浏览器的解决方法 1.首先打开Anoconda Prompt,输入命令 jupyter notebook --generat ...

  4. 使用Word发表博客

        使用浏览器编辑博客,会让你感到非常不方便,如果在没有网络的时候,就不能打开编辑器页面了,只能先写在word或其他编辑软件中.可以设置word使用word编辑并直接发布到博客.   文件 - 新 ...

  5. JAVA上百实例源码以及开源项目

    简介 笔者当初为了学习JAVA,收集了很多经典源码,源码难易程度分为初级.中级.高级等,详情看源码列表,需要的可以直接下载! 这些源码反映了那时那景笔者对未来的盲目,对代码的热情.执着,对IT的憧憬. ...

  6. editplus快捷键大全其他editplus快捷键

    editplus快捷键大全其他editplus快捷键,更多快捷键请参考以下文章:editplus快捷键大全之editplus搜索快捷键 editplus快捷键大全之editplus编辑快捷键 edit ...

  7. editplus快捷键大全

    Eclipse快捷键 10个最有用的快捷键 1. ctrl+shift+r:打开资源 ctrl+b编译 ctrl+d删除 2. ctrl+o:快速outline  --->这个是查看一个类中的用 ...

  8. linux samba.tar.gz安装和配置

    安装步骤: 1. tar -xzvf samba-3.5.10.tar.gz2. cd samba-3.5.103. cd source34. ./autogen.sh  如果出现:./autogen ...

  9. 初步接触html心得

    接触HTML大概有七天,做一下小总结,过过记忆. html大致可分为三部分:Dtd头.Head.Body三大部分. Dtd头:是用于浏览器编辑的,也就是俗话说的给电脑看的的东西. Head:内细分下大 ...

随机推荐

  1. 用法简单的图片和视频播放的框架Demo

    最近在恶补自己不足的基础知识,偶然在一个QQ群里看到作为同行业的大神们在开源自己的代码.并且在炫耀说让我们找Bug,于是出于好奇就看了下,点开了一个关于图片和视频播放的Demo.也就是接下来我要说的这 ...

  2. 一个layer可以跟着画完的线移动ios程序 好玩啊。

    用法:采用的是关键帧实现的. 实验目的:让上层的layer子层能够跟着在另一个子层上花的线进行移动 .即当线画完之后,图形开始移动,并且能够停在最后的那个位置 效果图: 采用是直接在layer图层上进 ...

  3. 理解css 中的position五个属性

    在实际开发页面布局时,运用position,对定位的块级元素的嵌套的效果总是不太理解,这里做了几个测试 一般的在w3c中我们可以很容易的获取定义: static : 默认值.没有定位,元素出现在正常的 ...

  4. Java获取线程的对象和名称

    /*获取线程对象以及名称(很有意义的) 原来线程都有自己默认的名称Thread-编号  该编号从0开始 Thread 父类的方法static  Thread currentThread() :获取当前 ...

  5. iOS 分类思想(2)

    /******************* NSString+NumCount.h文件 ******************************/ #import <Foundation/Fo ...

  6. 简单改造 starling 中的 AssetManager 让其更适合 批次加载纹理

    API文档参考:http://doc.starling-framework.org/core/starling/utils/AssetManager.html 项目想以不改动starling的情况下对 ...

  7. JDBC-ODBC桥接访问SQLServer2008数据库

    来源:十二随风博客 将对JDBC API的调用,转换为对另一组数据库连接API的调用优点:可以访问所有ODBC可以访问的数据库缺点:执行效率低.功能不够强大 (1)建立数据源,注意系统DNS才行,用户 ...

  8. C#序列化/反序列化

    序列化:将实体类以二进制或者XML的形式保存到磁盘或者内存中. 反序列化:将序列化的二进制文件和XML文件解析成实体类. 例如下面的二进制序列化与反系列化: using System; using S ...

  9. 微信video标签全屏无法退出bug

    安卓(android)微信里面video播放视频,会被强制全屏,播放完毕后还有腾讯推荐的视频,非常讨厌..强制被全屏无法解决,但是视频播放完毕后退出播放器可以解决.方法就是视频播放完毕后,用音频aud ...

  10. 信号量 sem_undo设置

    一 为什么要使用信号量 为了防止出现因多个程序同时访问一个共享资源而引发的一系列问题,我们需要一种方法,它可以通过生成并使用令牌来授权,在任一时刻只能有一个执行线程访问 代码的临界区域.临界区域是指执 ...