运行效果:

浏览器编辑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. Rafy 框架 - 大批量导入实体

    某些场景下,开发者希望能够大批量地把实体的数据导入到数据库中.虽然使用实体仓库保存实体列表非常方便,但是其内部实现机制是一条一条的保存到数据库,当实体的个数较多时,效率就会很低.所以 Rafy 设计了 ...

  2. HDU 5014Number Sequence

    思路: 对于一个二进制100011: 尽量将填满:填成111111: 然后有一个很好算的方法 gets(n)表示二进制下N有多少位,N^X=(111111)2 X=111111^N; 其实答案可以直接 ...

  3. DB9 公头母头引脚定义及连接

    1.实物及引脚简单介绍 在做开发的时候常常会用到串行接口,一般9针的串行接口居多.例如以下图所看到的: 公头母头用于连接线的採用上图封装.但用于开发板的时候採用90度弯角插针的封装.例如以下图: 各引 ...

  4. WEB/ WCF安全认证

  5. 性能优化工具---vmstat

    作用: 报告关于内核线程.虚拟内存.磁盘.陷阱和 CPU 活动的统计信息 参数: 通过两个数字参数来完成的,第一个参数是采样的时间间隔数,单位是秒,第二个参数是采样的次数 显示说明: 第一行数据反映开 ...

  6. PSD 学位涵义   Poor, Smart and Deep desire to become rich 的缩写,不是真正的学位认证,是对一种心理状态的形容,所谓PSD学位是形容那些贫穷,但是很聪明,很深…_●.×

    PSD 学位涵义 Poor, Smart and Deep desire to become rich 的缩写,不是真正的学位认证,是对一种心理状态的形容,所谓PSD学位是形容那些贫穷,但是很聪明,很 ...

  7. 深度学习之循环神经网络(RNN)

    循环神经网络(Recurrent Neural Network,RNN)是一类具有短期记忆能力的神经网络,适合用于处理视频.语音.文本等与时序相关的问题.在循环神经网络中,神经元不但可以接收其他神经元 ...

  8. php使用gearman进行任务分发

    一.安装gearman 下载gearman源码包 1 https://launchpad.net/gearmand/+download 如: gearmand-1.1.12.tar.gz 下载php的 ...

  9. iPhone照片格式heic图片怎么打开

    苹果自iOS11系统之后默认的是heic图片格式,在电脑和安卓中都无法直接查看,需要将其转换图片格式,那苹果heic图片怎么转换成jpg格式?下面我们一起来看看吧! 使用工具:电脑.图片 操作方法: ...

  10. SpringMVC文件下载与JSON格式

    点击查看上一章 现在JSON这种数据格式是被使用的非常的广泛的,SpringMVC作为目前最受欢迎的框架,它对JSON这种数据格式提供了非常友好的支持,可以说是简单到爆. 在我们SpringMVC中只 ...