HTML编辑器

点击打开在线编译器，边学边练

俗话说：“工欲善其事，必先利其器；”一个好用的html编辑器，可以让您在制作html网页效率更高，事半功倍的效果。

下面给大家介绍几款常用的编辑器：

1. 使用 Notepad 或 Notepad++ 来编写 HTML

这款是大多数电脑自带的记事本功能，我们相信，使用一款简单的文本编辑器是学习 HTML 的好方法。

步骤一：启动记事本

如何启动记事本：

（1）开始→所有程序→附件→记事本

（2）开始→输入指令notepad，启动记事本

（3）直接在桌面新建一个文本文档

以上三个方法都可以。

步骤二：用记事本来编辑 HTML

在记事本中键入 HTML 代码：

<!DOCTYPE html>
<html>
<body>
<h1>C语言网</h1>
<p>欢迎来我们网站学习和打卡。</p>
</body>
</html>

如图所示：

记事本

步骤三：保存 HTML

在记事本的文件菜单选择“另存为”。

当您保存 HTML 文件时，既可以使用 .htm 也可以使用 .html 扩展名，两者没有区别，起一个容易记忆的名字，比如test。

保存 HTML

步骤四：在浏览器中运行这个 HTML 文件

启动您的浏览器，然后选择“文件”菜单的“打开文件”命令，或者直接在文件夹中双击您的 HTML 文件。

运行显示结果类似如下:

浏览器运行HTML文件

2. 使用 Visual Studio Code 来编写 HTML

Visual Studio Code 是一个运行于 OS X，Windows 和 Linux 之上的，针对于编写现代 Web 和云应用的跨平台编辑器。它也是被誉为宇宙最强编译器。你可以从下面软件的官网中下载对应的软件，按步骤安装即可。

VS Code：https://code.visualstudio.com/

你可以从以上软件的官网中下载对应的软件，按步骤安装即可。

步骤 1: 新建 HTML 文件

在 VS Code 安装完成后，选择” 文件(F)->新建文件(N) “，在新建的文件中输入以下代码：

<!DOCTYPE html>
<html>
<body>
<h1>C语言网</h1>
<p>欢迎来我们网站学习和打卡。</p>
</body>
</html>

步骤 2: 另存为 HTML 文件

然后选择” 文件(F)->另存为(A) “，文件名为 test.html:

步骤 3: 在浏览器中运行这个 HTML 文件

然后鼠标右击编辑器上的文件名，选择在默认浏览器打开（也可以其他的浏览器）:

3. HBuilder

HBuilder是DCloud推出的一款支撑HTML5的Web开发IDE。HBuilder的编写用到了Java、C、Web和Ruby。HBuilder本身主体是由Java编写的。速度快，是HBuilder的最大优势，通过完整的语法提示和代码输入法、代码块等，大幅提高HTML、js、css的开发效率。Hbuilder是由有我国的前端开发人员编写的一款前端开发IDE，所以在使用上比较契合咱们中国人的开发习气，用HBuilder写HTML代码还是很便利的。

4. AdobeDreamweaverCS

dreamweavercs6是国际顶级软件厂商adobe推出的一套拥有可视化修正界面，可用于修正网站和移动应用程序的代码修正器。由于它支撑代码、拆分、设计、实时视图等多种方法来创造、编写和修正网页，关于初级人员，你能够无需编写任何代码就能快速创立web页面。其老练的代码修正东西更适用于web开发高级人员的创造！cs6新版本使用了自适应网格版面创立页面，在发布前使用多屏幕预览审阅设计,可大大提高工作效率。所以AdobeDreamweaverCS也是一个比较好的HTML代码修正器。

5. SublimeText3汉化版

SublimeText是一款具有代码高亮、语法提示、自动完成且反应快速的修正器软件，不仅具有华丽的界面，还支撑插件扩展机制，用她来写代码，绝对是一种享受。相比于难于上手的Vim，浮肿沉重的Eclipse，VS，即便体积轻巧迅速发动的Editplus、Notepad++，在SublimeText面前大略显失色，无疑这款性感无比的修正器是coding的不错的挑选。

6.Notepad++

Notepad++是旨在替代Windows默认的notepad而生，比notepad的功用强大许多许多。notepad++支撑插件，增加对应不同的插件，以支撑不同的功用。里边除了一些常见的插件之外，还有一些好玩的插件，比方将文字读出来的speech插件。Notepad++属于轻量级的文本修正类软件，比其他一些专业的文本修正类东西，发动更快，占用资源更少，可是从功用使用等方面来说，不亚于那些专业东西。

7. Editplus

下载地址：https://www.editplus.com/

EditPlus是一款由韩国 Sangil Kim （ES-Computing）出品的小巧但是功能强大的可处理文本、HTML和程序语言的Windows编辑器，它也是一个非常好用的HTML编辑器，你甚至可以通过设置用户工具将其作为C,Java,Php等等语言的一个简单的IDE。

本文固定URL：https://www.dotcpp.com/course/1117

上一课：