HTML 在线编辑器

预览效果

Console

在线编译器

支持所有主流语言，在线就可以编程

关于 HTML 在线编辑器

有时候我们只是想快速查看一个标题、一段文字或者几个链接放到网页里是什么效果。如果为了这点小测试，还要专门新建文件、打开本地编辑器、再保存并刷新浏览器，这样下来确实有点折腾人。

而使用咱们绿叶网的 HTML 在线编辑器，直接在浏览器中编写代码就能查看效果。对于刚开始学习 Web 开发的小伙伴来说，这种 “写一点、看一点” 的方式更加轻松方便。

HTML 在线编辑器怎么用？

页面上方就是为你准备的 HTML 在线编辑器：左边写代码，右边看效果。完全不用折腾环境配置，打开就能用。

写代码：在左侧区域，输入或粘贴 HTML 代码。
跑效果：点击 “运行” 按钮（或使用快捷键 Ctrl + Enter），右侧马上就能看到网页效果。
随便改：想要调整内容的话，直接在左边改，再运行一次就行。

来，我们先写一个最简单的页面，顺便认识一下 HTML 最基础的 “骨架” 是怎样的。

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <h1>绿叶网</h1>
        <p>为好教程，全力以赴</p>
    </body>
</html>

页面效果如下图所示。

绿叶网HTML在线编辑器运行最基础页面代码的网页预览效果截图

我们会发现，右侧并没有把 <h1> 和 <p> 这些标签原样显示出来，而是把它们变成了真正的 “大标题” 和 “段落”。小伙伴们可以试着改改里面的文字，再点一次 “运行” 按钮，自己动手感受一下变化。

HTML 在线编辑器适合哪些场景？

HTML 在线编辑器主打一个 “简单直接”。当你手头代码不多，又想立刻看到网页长什么样时，用它会非常省事。

它非常适合用于以下场景：

新手入门：刚接触基础标签（比如标题、段落、图片）时，左边敲代码，右边出效果，学习体验非常直观。
快速试错：突然忘了某个标签怎么写，或者想验证一小段 HTML 结构，打开网页就能试，不用为了几行代码去折腾本地开发环境。
教学演示：老师上课演示，或学生做随堂练习时，直接在网页上操作，免去了安装软件的烦恼，大家可以把精力直接放在敲代码上。

HTML在线编辑器适合的三个主要场景：新手入门、快速试错与教学演示

当然了，在线编辑器更像是一把轻巧的 “瑞士军刀”，适合前期练手和小修小补。等你以后进阶了，要开发那种包含大量文件、样式和图片的完整网站时，咱们再换上 VS Code 这类专业的本地工具也不迟。

HTML 是什么？

HTML（超文本标记语言）是构建网页和 Web 应用的基础技术，几乎所有的网站都会使用 HTML 来定义页面结构。自 1991 年问世以来，HTML 一直是 Web 开发的核心语言之一。

HTML5图标与网页基础结构图解，展现HTML作为构建网页基础技术的作用

HTML 使用各种元素（比如标题、段落、图片等）来描述一个网页的结构。HTML 为一个网页提供基本结构，然后我们可以进一步使用 CSS 来美化网页，或者使用 JavaScript 来为网页增加交互特效。

所有的 Web 开发都离不开 HTML 的学习。不管你是准备做前端开发，还是做后端开发（如 Java 后端开发），都必须要对 HTML 有基本的了解。

HTML 是网页的标准语言，它并不是一门编程语言（如 C/C++、Java 等），而是一门描述性的标记语言。

语法：

<标签符>内容</标签符>

说明：

标签符一般都是成对出现的，包含一个 “开始符号” 和一个 “结束符号”。结束符号只是在开始符号前面多加上了一个斜杠 “/”。当浏览器收到 HTML 文本后，就会解析里面的标签符，然后把标签符对应的功能表达出来。

HTML、CSS 和 JavaScript 有什么关系？

刚接触网页开发时，HTML、CSS、JavaScript 这 “三兄弟” 总是形影不离，新手小伙伴很容易把它们混淆。实际上，它们分工是非常明确的，我们可以拿 “建房子” 来打个比方：

HTML（搭骨架）：相当于建好的毛坯房。它负责搭建网页的基础结构，决定了哪里放文字、哪里放图片。
CSS（做装修）：相当于给房子做精装修。它负责刷墙漆、铺地板，决定了网页的颜色、大小、排版和字体，让页面变得好看。
JavaScript（装电器）：相当于给房子通上了水电和智能家居。它让门铃能响、电视能开。JavaScript 负责网页的点击弹窗、动画效果和数据刷新，让页面真正 “活” 起来。

简单来说：HTML 是网页的地基和骨架。如果只用 HTML，你能写出一个完整的静态页面。而在此之上，搭配 CSS 页面才会变美，然后加上 JavaScript 页面才会变聪明。

将建房子过程作为比喻，生动解释HTML搭骨架、CSS做装修与JS装电器之间的关系

常用快捷键

HTML 写得多了以后，鼠标点来点去多少有点慢。HTML 在线编辑器还支持下面这些常用快捷键：

Ctrl + Enter：运行代码。
Ctrl + Z：撤销、Ctrl + Y：重做。
Ctrl + C：复制、Ctrl + V：粘贴。
Ctrl + A：全选。
Ctrl + X：剪切。
Ctrl + /：注释或取消注释。
Ctrl + Home：跳转到首行的行首。
Ctrl + End：跳转到末行的结尾。

其中最值得记住的还是 Ctrl + Enter。我们写完 HTML 顺手一按就能运行并查看效果，习惯以后会方便很多。

常见问题

1. 为什么叫 “HTML 在线编辑器” ，而不是 “HTML 在线编译器” 呢？

像 C 语言、Java 这类编程语言，代码写完后，通常需要先 “翻译”（也就是编译）成电脑认识的机器码才能运行。

但 HTML 不一样，它不需要经历这个 “翻译（编译）” 过程。浏览器就像个阅读理解高手，拿到 HTML 代码后直接就能看懂里面的标签，然后按照要求把网页展示出来。因此，我们把它叫做 “在线编辑器” 或 “在线预览工具” 更准确。

正因为省去了编译这一步，写 HTML 是一件反馈非常直接的事情：你可以边写边看，改动一个标签或一段文字，页面立马就能发生相应的变化，所见即所得。