整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
nlinehtmleditor.net是非常简单和易用的HTML在线编辑器，适用的标签有H1，H2，H3，H4，P,IMG,List等，还可以在下方查看实时预览。你可以手动输入这些标签，也可以通过点击工具栏上的图标来使用它们。它甚至可以让你通过具体的图片路径添加图片。完成编辑之后，你可以复制你的HTML代码并保存到本地磁盘，也可以在你的网站或博客中使用它。
html.am提供了一个成熟的免费在线WYSIWYG HTML编辑器。它拥有几乎所有的命令用来编辑你的文字，包括字体大小，颜色，尺寸，列表，超链 接及更多。 除了上面提到的标签，它还支持高级的HTML标签，包括表格，文本框， 复选框，单选按钮，文本域，按钮等。此外，还能插入图片对象，Flash 对象，表格甚至是iFrame。你可以按要求键入和编辑文本内容。编写完成后你可以将编辑页面的源代码复制到您的网站上。您可以通过点击主菜单上的源按钮切换源代码 ，还能通过点击最大化按钮把编辑器最大化。
jsfiddle.net是一个多窗格的HTML在线编辑器。你可以在HTML窗格中键入HTML代码，而CSS和Java Script脚本将会键入到各自的窗口中。每次更改之后你必须点击运行按钮来查看最终的结果。你可以进行在线保存 ，它为你提供了一个唯一的保存路径。另外，它还支持在线协作。
codepen.io是一个具有先进功能的HTML在线编辑器，可以在同样的浏览窗口中单独编辑HTML, CSS,和Java Script。你可以在编写的同时进行预览，还能点击“更改视图”按钮重新进行分层并选中你需要的层，编写完成之后，你可以将代码导出并保存到一个压缩文件中。这个编辑器拥有许多的快捷键方便您进行使用。
cssdeck.com是一个拥有四个窗格的HTML在线编辑器，他们分别用来编写HTML, CSS和Java Script并进行实时预览。你可以在每个窗口中单独编写代码，但组合的输出结果将会显示在预览窗口中。此外，编辑器还拥有许多的快捷键。
html-color-codes.info提供了免费的HTML在线编辑器。它可以让你键入和编写文本并生成格式化HTML代码。无论是专业的HTML程序员还是只了解一些HTML知识的新手都能使用它。你可以应用格式，缩进，各种样式 ，不同的字体以及字体大小到你的文本中。它还具有“粘贴为纯文本” 和“粘贴”的选项，使格式设置更容易。它也有一个预览按钮来预览您的网页。完成编辑后，您可以点击“编辑HTML源码”按钮（在工具栏上的最后一个按钮）复制HTML代码。
htmleditor.in是一个类似于MS Word的免费WYSIWYG HTML和HTML5在线编辑器。只需要进入文本，并应用各种格式设置到你的文本中，如：粗体，斜体，下划线，删除线，上标，下标，编号，字体大小，字体，颜色等。它有一个拼写检查的设备，能进行拼写检查。它还具有许多形式设计工具，你可以插入动画，图片，表格，水平线，笑脸和其它的外部对象到你的页面。
codebeautify.org不仅仅是一个免费的HTML在线编辑工具。它实际上是一个用来美化和精简代码的在线工具。您可以输入一个现有网页的网址，它将会显示出完整的代码。你可以编写代码并进行实时查看。此外，你还可以页面存储大小以及字符数。最后，它能为你所修改的代码提供一个唯一的路径进行保存。这个功能让它成为团队合作项目的第一选择，每个团队成员都能通过共享路径看到修改后的代码。
htmledit.squarefree.com是一个基本的HTML在线编辑器。在使用它之前你必须了解HTML的相关知识。你必须手动将格式化标记应用于文本类型，能实时看到文本和格式的变化。总而言之，这是一个非常基础的HTML编辑器。
4html.net 提供免费的HTML在线编辑功能。只需在给定区域键入文本并使用各种格式化标签。它拥有的格式例如：粗体，斜体风格，强调，预格式化的地址，标题，标题1至6的格式等。它还有代码高亮显示，自动缩进等功能。除了简单的粘帖功能，它还具有“粘贴为纯文本”和“从Word中粘贴”等功能。编辑结束后，你可以把HTML代码复制到你的网站或博客中。
{@@_update}
本站文章除注明转载外，均为本站原创或翻译
TML教程
超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。
您可以使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析。
在本教程中，您将学习如何使用 HTML 来创建站点。
HTML 很容易学习！相信您能很快学会它！
本教程包含了数百个 HTML 实例。
使用本站的编辑器，您可以轻松实现在线修改 HTML，并查看实例运行结果。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>孙叫兽的博客</title>
</head>
<body>
<h1>我的第一个标题</h1>
<p>我的第一个段落。</p>
</body>
</html>HTML 文档的后缀名
.html
.htm
都可以。
实例：
<!doctype html>
<html>
<header>
<meta charset="utf-8">
<title>孙叫兽的博客</title>
</header>
<body>
<h1>这是我的标题</h1>
<p>这是我的段落</p>
</body>
</html>实例解析
什么是HTML？
标签
<标签>内容</标签>html元素
“HTML 标签” 和 “HTML 元素” 通常都是描述同样的意思.
但是严格来讲, 一个 HTML 元素包含了开始标签与结束标签，如下实例:
HTML 元素:
<p>这是一个段落</p>web浏览器
Web浏览器（如谷歌浏览器，Internet Explorer，Firefox，Safari）是用于读取HTML文件，并将其作为网页显示。
浏览器并不是直接显示的HTML标签，但可以使用标签来决定如何展现HTML页面的内容给用户
html网页结构
<html>
<head>
<title>页面标题</title>
</head>
<body>
<h1>这是一个标题</h1>
<p>这是一个段落。</p>
<p>这是另外一个段落。</p>
</body>
</html>html的版本：
<!DOCTYPE>声明
<!DOCTYPE>声明有助于浏览器中正确显示网页。
网络上有很多不同的文件，如果能够正确声明HTML的版本，浏览器就能正确显示网页内容。
doctype 声明是不区分大小写的，以下方式均可：
<!DOCTYPE html>
<!DOCTYPE HTML>
<!doctype html>
<!Doctype Html>html5
<!DOCTYPE html>html4
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML4 Transitional//EN""
http://www.w3.org/TR/html4/loose.dtd">xhtml1.0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">中文编码
目前在大部分浏览器中，直接输出中文会出现中文乱码的情况，这时候我们就需要在头部将字符声明为 UTF-8。
多人可能都用过Web编辑器，比如Ckedit等，除了Word等本地编辑器外Web编辑器也是最常用最方便Web内容来源。这些在线编辑器的一个短板限制很多，不能实时反馈在线效果。本文虫虫给大家介绍一种很简单的无限制在线Html编辑器，实现所写即所得UI和样式实时刷新，JS代码也能进行热加载执行重新渲染，而且这些实现都非常简单，只用到了很少的html和css代码。
要使Html可以编辑实际上很简单只要一个body标签就足矣。contenteditable这个body属性可能鲜为人知，实际上它的功能就是实现Html文档可编辑。我们新建一个Html文档（Cc.html），然后将如下代码复制粘贴到文档中：
<body contenteditable="true"></body>
通过浏览器打开这个文档，怎么样，神奇的事情发生了把？
你可以在这个页面任意输入文本甚至还可以粘贴图片。（兼容基本上所有的浏览器，IE也可以）。还可以支持Ctr+Z撤销和重做。
我们知道<div>…</div>和<p>…</p>标签内的文字都会在页面显示，而<script>…</script>和<style>…</style>中的都是引用的前端脚本的代码（JS）等需要通过浏览器引擎执行渲染显示出来的，那么这些代码是不是可以在显示出来呢？实际上在大多数浏览器只是通过CSS样式隐藏起来的，我们通过重写在div>…</div>中增加script, style { display: block; }即可：
<body>
<style>
script, style { display: block; }
</style>
<script>
console.log("Hello Chongchong!");
</script>
</body>
通过将其粘贴到html文件并在浏览器中打开它，显示如下：
而且，我们也可以将这个页面也设置为contenteditable，并且<style></ style>增加样式显示，比如我们修改字体的大小为20pt，颜色为绿色：
<body contenteditable="true">
<style>
script, style { display: block;font-size: 20pt;color: green}
</style>
<script>
console.log("Hello ChongChong!");
</script>
</body>
现在我们可以，通过在线编辑style{}的内容，让页面的呈现实时变化，比如字体再增加10pt，颜色变成蓝色。
注意，输入时候内容会实时变化的，比如你修改20pt为30pt途中，你字体会变成2，很小很小，继续删除2就会恢复成默认正常默认，你不用理会继续输入30字体就会变成30pt，其他参数也类似。
该方法可以实时刷新样式显示<style></ style>标签，对于JS代码，由于其只会在页面加载时候执行一次，你可以修改<script>…</script>内容，但是不能实时执行生效。
上面我也说，JS代码的修改需要重新加载才能执行。为了实现重新加载，我们首先使用简单的按键（Shift+enter）触发重新加载的方法：
<body contenteditable="true">
<style>
script, style { display: block;font-size: 20pt; color: green}
</style>
<script>
//alert("Hello ChongChong!");
document.onkeydown = function(e) {
var key = window.event ? event : e;
if (key.shiftKey && key.keyCode == 13) {
eval(window.getSelection().focusNode.parentNode.innerHTML);
}
};
</script>
</body>
通过浏览器打开，并且编辑去掉//alert("Hello ChongChong!")前面的//注释,然后按键shift时按Enter键。
结果如上图就可以弹出一个消息窗口。
通过上面的方法我们实现了一个可编辑上面在线编辑器。在前面代码的基础上，我们提供一个基础的模版供大家使用，完整代码如下：
<body contenteditable="true" spellcheck="false">
<title>editor</title>
<style>script,
style {
display: block;
white-space: pre-wrap;
background-color: #eeeeee;
border: solid;
border-radius: 10px;
padding: 20px;
}
body {
font-family: Menlo, Monaco, monospace;
font-size: 12pt;
tab-size: 4;
}
script.success {
background-color: #ccffcc;
border: solid, #00cc00;
}
script.error {
background-color: #ffcccc;
border: solid, #ff1111;
}
</style>
<script type="text/javascript" class="success">
//alert("Hello Chongchong!");
document.onkeydown = function(e) {
var key = window.event ? event : e;
var node = window.getSelection().focusNode;
if (key.shiftKey) {
if (key.keyCode == 13) {
node.parentNode.classList.remove("error");
node.parentNode.classList.remove("success");
try {
eval(node.parentNode.innerHTML);
node.parentNode.classList.add("success");
} catch (e) {
node.parentNode.classList.add("error");
}
return false;
}
} else {
if (key.keyCode == 13) {
document.execCommand("insertHTML", false, "\n");
return false;
}
if (key.keyCode == 9) {
document.execCommand("insertHTML", false, "\t");
return false;
}
}
}
</script>
</body>
将上面代码保存为html，然后用浏览器打开就实现了一个简单的在线html编辑器。
该在线编辑器模版还非常简陋，如果能增加语法高亮和自动完成等一些功能可能很好，但是这是很大工作量，有兴趣的可以尝试着做下。也可以通过引入一些第三方的库来做下，比如使用微软的language-server-protocol 库来实现自动完成功能。
至于语法高亮，一般做法是将所有内容填充到标签中并对其进行着色（大多数其他基于html的编辑器都这样做），但是这样会破坏自动刷新和热加载功能的简单性。
你可能还希望处理实际内容，而不仅仅是编辑本身。这个简单，只需在contenteditable body中添加另一个元素，该操作可以通过JS脚本实现该操作。还可以添加更多元素，例如一个按钮或者只是通过修改快速HTML框来实现。这些都可以在提供的模版的基础上按需增加修改。
本文我们在contenteditable属性的基础上实现了，在线Html的编辑器实现内容和样式的实时更新、实现了JS代码的热加载。虽然此在线编辑器还非常简陋，但是以此作为一个想法和基础"抛砖引玉"，希望大家可以实现一个功能完善，更加实用的在线编辑器。
*请认真填写需求信息，我们会在24小时内与您取得联系。
