html编辑 手机浏览器,浏览器编辑HTML

本文介绍了HTML编辑和运行的基本方法,包括如何在浏览器中直接编辑HTML代码,并提供了相关JavaScript函数示例。此外,还讨论了HTML编辑器的样式设计,如按钮样式和文本区域的样式设置。内容涵盖HTML编辑器的界面设计、代码运行机制以及一些实用技巧,如快速删除功能。
摘要由CSDN通过智能技术生成

运行效果:

浏览器编辑HTML

test.html

不想写开头,点击此处参考一下HTML开头吧!

HTML源码:

浏览器编辑HTML

//运行文本域代码

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 ="";

}

.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;

}

>

test.html

浏览器HTML运行

请输入你想要输入的内容

内容最好不要为空,否则没有显示效果


浏览器编辑web页面的方法

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

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

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

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

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

使用Word发表博客

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

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

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

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

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

editplus快捷键大全

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

linux samba.tar.gz安装和配置

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

初步接触html心得

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

随机推荐

Jquery ui autocomplete简单api

重要说明:与配置选项类似,Autocomplete插件的方法也不是直接调用,而且通过autocomplete()方法进行间接调用.例如: $("#title").autocompl ...

深入浅出设计模式——原型模式(Prototype Pattern)

模式动机在面向对象系统中,使用原型模式来复制一个对象自身,从而克隆出多个与原型对象一模一样的对象.在软件系统中,有些对象的创建过程较为复杂,而且有时候需要频繁创建,原型模式通过给出一个原型对象来指明所 ...

location.reload

location.reload()-----重新加载缓存页面 location.reload(true)------重新加载服务器页面

HackerRank "Lucky Numbers"

Great learning for me:https://www.hackerrank.com/rest/contests/master/challenges/lucky-numbers/hacke ...

Python学习教程(learning Python)--1.1Python程序设计流程

Python程序设计与其他高级语言程序设计流程基本一致     step1 程序设计     step2 编写Python代码     setp3 Python语句语法纠错     step4 测试程 ...

Networking - IPv4 报文格式

每个 IP 数据报都以一个 IP 报头开始.源计算机的 TCP/IP 软件构造这个 IP 报头,目的计算机的 TCP/IP 软件利用 IP 报头中封装的信息处理数据.IP 报头包含大量信息,包括源 I ...

Java 关于中文乱码处理的经验总结【转载】

为什么说乱码是中国程序员无法避免的话题呢?这个首先要从编码机制上说起,大家都是中文和英文的编码格式不是一样,解码也是不一样的!如果中国的程序员不会遇到乱码,那么只有使用汉语编程.汉语编程是怎么回事我也 ...

html input设置为只读属性

有两种方式可以实现input的只读效果:disabled 和 readonly. 自然两种出来的效果都是只能读取不能编辑,可是两者有很大不同. Disabled说明该input无效,及其value不会 ...

从概念到业务来看 To B 和 To C 产品区别在哪?

自从互联网火了以后,一大堆 o2o,b2b,c2c 的产品出现,这些名词也渐渐为人熟知,但很多人对这些产品的理解也是停留在概念上,实际上绝大部分人用的都是 To C(也写作2c)产品,比如微信,qq ...

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值