HTML初级教程

在本教程API中，你将第一次认识HTML并逐步学习如何使用 HTML 来构造一个网页页面。HTML在编程中是很容易学习的，对于初学者比较容易入门。

jesen

2020-03-20 09:20:25

文档目录

我的书签

请登录

HTML 编辑器

所谓“工欲善其事，必先利其器”，这句古语，表示我们在做某件事之前，应该考虑好一些必备工具或者条件。

我们在开始学习编写HTML文档的时候，也要做一些准备工作，首先就是选择好一款得心应手的编辑器，在这里作者会列出市面上一些常用的编辑器以供大家选择。

文本编辑器

我们使用的每种操作系统都自带有（安装完系统就有的软件）简单的文本编辑器。

系统自带的这个文本编辑软件，只是提供了简单文本输入、编辑、保存的功能，没有其他任何辅助功能：你输入什么它就保存什么，所有文本都需要通过自己一个字符一个字符进行输入。

正因为它没有任何辅助工具，带给我们就是极致的学习体验“自己动手写一写，记得牢，学的好”；所以它是初学者最佳的用来编写HTML的工具。

Windows 系统自带的文本编辑软件：notepad.exe（记事本）；
Linux 系统自带的文本编辑器：vi、vim 或者 emacs；
Mac 系统自带的文本编辑器：TextEdit；

高级文本编辑器

高级文本编辑器，通过名字我们首先可以明白一点，就是它比上面提到的文本编辑器要高级，那么具体高级在哪里呢？

它的高级表现在增加了许多可以提高编写效率的辅助功能：

无限制的撤消与重做
英文拼字检查
自动换行
列数标记
搜寻取代
同时编辑多文件
支持颜色标记、HTML 标记等

因为高级文本编辑器大部分都内建完整的 HTML & CSS 指令功能，对于习惯用记事本（文本编辑器）编辑HTML网页的朋友，它可帮你节省一半以上的网页制作时间；高级文本编辑器可以算的上是入门者最佳编写HTML文档的工具。

以下是几款常用的高级文本编辑器：

Notepad++：https://notepad-plus.en.softonic.com/
EditPlus：https://www.editplus.com/
Sublime Text：http://www.sublimetext.com/
UltraEdit：https://www.ultraedit.com/

专业HTML编辑器：HTML IDE

IDE：Integrated Development Environment，中文名称 集成开发环境 它就是包含了一系列开发工具（组合套装）的应用软件。

我们在使用文本编辑器或者高级文本编辑器编写网页的时候，如果只是学习环境，那么单独使用这些编辑器就足可以满足我们的需求了；但如果是项目（正式）环境，我们面对的不仅仅是一个文件，而是成百上千的文件或者文件夹，这个时候如果还使用文本编辑器和高级文本编辑器那就显得捉襟见肘了。

正式的项目环境不仅仅要用到编辑器，还要用到其他相关的工具，比如：版本控制工具、FTP、NPM、服务器等等，如果这个时候还使用传统方式：一个一个工具单独下载下来使用，那对于开发者来说就相当累了。

世界万物都是有需就有供，那么IDE就是集成了各种各样开发工具的软件，我们在IDE中想要使用那个工具，就直接使用，不用再去逐个找相关工具运行操作了；这就像苹果手机一样，完全封闭的内部细节，我们不需要去了解内部结构，我们只需要使用即可，这就是拿来就用简单直接。

以下是几款常用的IDE：

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

Visual Studio Code（简称 VS Code）是一个由微软开发，同时支持 Windows 、 Linux 和 macOS 等操作系统且开放源代码的代码编辑器，编辑器中内置了扩展程序管理的功能。

WebStorm：https://www.jetbrains.com/webstorm/

WebStorm 是JetBrains公司旗下一款WEB开发工具。已经被广大中国JS开发者誉为“Web前端开发神器”、“最强大的HTML5编辑器”、“最智能的JavaScript IDE”等。与IntelliJ IDEA同源，继承了IntelliJ IDEA强大的JS部分的功能。

CodePen：https://codepen.io

CodePen 是专门为WEB开发者设计的在线开发和预览平台。CodePen 的编辑器分为 HTML、CSS、JavaScript 版块，在编辑代码后，可以直接在页面中实时预览效果；对于一个WEB入门学习者，CodePen 中已有的海量项目将会是一个很好的学习渠道。通过运行和修改这些项目，将有助于你了解这些前端代码的编写技巧和运行效果。

未完待续...

作者文档