HTML系列教程：2_HTML 编辑器（零基础超详细讲解

面向完全零基础新手，搞懂什么是 HTML 编辑器、各个工具优缺点、实操演示、怎么选工具。

前言

上一节我们学习了 HTML 是什么，知道 HTML 代码最终保存为 .html 文件，用浏览器打开就能看到网页效果。

HTML 编辑器，就是用来编写、修改 HTML 代码的软件工具。

重点：所有编辑器写出来的网页效果完全一样！ 编辑器只是帮你写代码，真正解析网页的是浏览器。编辑器本身不能生成网页效果，最终一定靠浏览器运行。

好的编辑器一般具备这几个对新手非常友好的能力：

语法高亮：不同标签显示不同颜色，一眼区分标签、文字、注释，不容易看错代码。
自动补全：写一半标签，自动帮你补全结束标签，少打很多字，减少写错。
代码提示：输入一部分，弹出可用标签、属性提示。
错误简单提醒：帮你发现少写符号、引号等低级错误。
快捷生成骨架：一键生成完整 HTML5 基础代码，不用手敲全部骨架。

新手误区：不是必须下载大型软件，电脑自带工具也可以写 HTML。

一、Windows 自带「记事本」（最原始工具）

Windows 系统自带，不用下载安装。打开方式：右键桌面 → 新建 → 文本文档。

✅优点

零安装，电脑直接就有。
非常纯粹，没有任何自动补全、提示，所有代码全部自己手打。

适合刚学 HTML 的前 1‑2 次练习，强迫自己记住标签，加深记忆。

❌缺点（新手非常痛苦）

没有语法高亮，全部都是黑色文字，标签、文字混在一起，代码一多根本分不清。
没有自动补全，每一个结束标签都要手动敲，很容易漏写 </p> </h1> 导致网页错乱。
保存文件很容易踩坑！

📝记事本实操举例（新手必看保存步骤）

新建文本文档，写下代码：

html 复制代码

<!DOCTYPE html>
<html lang="zh‑CN">
<head>
    <meta charset="UTF‑8">
    <title>记事本写网页</title>
</head>
<body>
    <h1>用记事本写HTML</h1>
</body>
</html>

点击【文件】→【另存为】

文件名：demo.html 后缀必须写 .html，不能写成 demo.html.txt
编码选择：UTF‑8（防止中文乱码）

新手大坑：Windows 默认会隐藏后缀名，很多同学实际文件名是 demo.html.txt，本质还是 txt 文本，浏览器不能识别为网页。

保存完成，双击这个文件，就会调用浏览器打开网页。

学习建议：只用来做 1‑2 次体验，后续学习不要长期用记事本写代码，效率太低。
Mac 电脑自带「文本编辑」，同样可以写，但要切换到纯文本模式。

二、Notepad++（Windows 轻量免费编辑器）

免费开源，体积很小，专门做文本代码编辑，仅支持 Windows 系统。

✅优点

免费，体积很小，启动飞快。
自带 HTML 语法高亮，标签会变成彩色。
支持代码折叠、多标签同时打开多个 html 文件。
简单插件扩展，支持代码格式化。

❌缺点

只支持 Windows，Mac 不能用。
自带没有一键生成 HTML 骨架，没有实时浏览器预览，写完要手动保存，再用浏览器打开刷新。
插件生态远不如 VS Code。

📝简单使用举例

新建文件，写完 HTML 代码；
保存的时候文件名写 index.html；
写完保存，切换到浏览器按 F5 刷新页面，查看效果。

适合：Windows 电脑，配置老旧电脑，不想装大型软件的同学。

三、VS Code（Visual Studio Code）【新手首选，强烈推荐】

微软开发，完全免费，支持 Windows / Mac / Linux 全平台，目前全球前端最主流编辑器。

✅优点（新手最看重）

免费开源，没有任何收费弹窗。
自带 HTML 语法高亮，内置 Emmet 快捷语法 ：输入英文感叹号 !，按Tab键，一键生成完整 HTML5 网页骨架，不用手敲 DOCTYPE、head、meta 全部内容，新手神器。
海量免费插件，想要什么功能安装插件即可。
代码自动补全，输入 <h1>，自动帮生成 </h1>。
可以安装Live Server插件：保存代码，浏览器页面自动刷新，不用手动点 F5 刷新浏览器。
轻量，对电脑配置要求不高。

❌缺点

原生没有实时预览，想要自动刷新网页，需要手动装插件。
刚安装完是裸编辑器，部分增强功能要自己装扩展。

📝VS Code 新手完整实操示例（一步一步照着做）

官网下载安装：code.visualstudio.com，安装一路下一步即可。
在电脑磁盘新建一个专门文件夹，比如叫html学习，所有网页文件都放在这个文件夹。
打开 VS Code → 左上角【文件 File】→【打开文件夹 Open Folder】，选中刚刚建好的html学习文件夹打开。

⚠️重要：一定要打开文件夹，不要只打开单个文件，后期写多个网页、图片、css 文件才不会路径出错。

在左侧资源管理器，新建文件，名字写 index.html。
在文件第一行输入英文半角符号：!，按下键盘Tab键。 自动生成完整骨架，效果如下：

html 复制代码

<!DOCTYPE html>
<html lang="zh‑CN">
<head>
    <meta charset="UTF‑8">
    <meta name="viewport" content="width=device‑width, initial‑scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

解释：!+Tab 就是 Emmet 快速语法，是写 HTML 最高频的快捷键，新手一定要记住。

在<body>里面写内容，修改 title 标题：

html 复制代码

<title>我的VS Code网页</title>
<body>
    <h1>VS Code写HTML演示</h1>
    <p>新手学习HTML，这是段落文字</p>
</body>

按 Ctrl+S保存（Mac 是Cmd+S）。

安装 Live Server 实现保存自动刷新

左侧点扩展图标（四个方块图标）；
搜索Live Server，作者 Ritwick Dey，点击安装；
回到 html 文件，右下角出现「Go Live」按钮，点击，自动打开浏览器。

以后修改代码，只要Ctrl+S保存，浏览器页面会自动更新，不用手动刷新浏览器，非常方便调试。

VS Code 新手必装 2 个简单插件

Chinese (Simplified)：软件界面汉化，全中文菜单，对新手友好。
Live Server：保存自动刷新浏览器预览网页。

✨综合建议：绝大多数新手直接用 VS Code，不管 Windows 还是 Mac，首选这个工具。

四、Sublime Text

跨平台编辑器，体积小巧，打开大文件速度极快，界面简洁清爽。

✅优点

启动速度非常快，占用内存小。
自带 Emmet，支持 ! + Tab一键生成 HTML 骨架。
多行编辑、强大快捷键。

❌缺点

收费软件，不购买会频繁弹出购买许可证弹窗，功能没有限制但是弹窗烦人。
中文支持需要配置。
插件生态弱于 VS Code。

适合：喜欢极简界面，熟悉快捷键的同学；新手不是首选。

五、HBuilderX（国产，中文友好）

国产 DCloud 开发，免费，专门面向前端开发，对中文用户友好。

✅优点

全中文界面，开箱即用，内置很多前端功能，不需要手动装大量插件。
内置浏览器预览，一键运行，保存自动刷新。
自带 Emmet 快捷生成 HTML 骨架。
除了写网页，还可以做小程序、移动端页面。

❌缺点

软件体积比 VS Code 大一些。
行业企业实际工作中，大部分公司使用 VS Code，如果你以后要找前端工作，更推荐熟悉 VS Code。

适合：完全小白，不想折腾插件，喜欢国产中文工具的同学，学习 HTML 也完全够用。

六、WebStorm（专业前端 IDE，不适合初学）

JetBrains 出品，专业级集成开发工具，企业项目用的多。

✅优点

内置全套功能，代码检查、调试、预览全部内置，不用找插件。

❌缺点

收费，价格贵；
软件体积巨大，启动慢，占用电脑资源高；
功能过于复杂，很多功能初学 HTML 完全用不到，新手容易被大量菜单搞晕。

不推荐刚学 HTML 的新手使用；适合后期做大型前端项目时再考虑。

七、在线 HTML 编辑器（不用安装任何软件，浏览器直接写）

代表工具：菜鸟工具、CodePen、JSFiddle。不需要下载软件，打开网页，左边写代码，右边直接看到网页预览效果。

✅优点

零安装，有浏览器就能写；
一边写一边实时看效果，快速做小练习。

❌缺点

代码保存在网页，关闭浏览器就丢失，不能当做正式写项目的工具，只适合临时测试小段代码。
网络不好就无法使用。

使用场景：做课堂小练习、临时测试一小段代码效果。

在线编辑器简单举例

打开在线编辑器，左边输入：

html 复制代码

<h1>在线编辑器演示</h1>
<p>这里写段落文字</p>

右边立刻看到渲染后的网页效果。

⚠️提醒：不要把自己完整作业写在线编辑器，一定要本地编辑器保存到自己电脑。

各编辑器对比总结表格（新手快速选择）

编辑器	是否免费	系统	适合人群	推荐指数
系统记事本	免费	Windows/Mac 自带	体验、练习记忆标签，不要长期使用	⭐
Notepad++	免费	仅 Windows	Windows 老电脑轻量使用	⭐⭐⭐
VS Code	免费	Windows/Mac/Linux	绝大多数新手首选，企业主流	⭐⭐⭐⭐⭐
Sublime Text	付费 (可无限试用)	全平台	追求极速简洁，能忍受弹窗	⭐⭐⭐
HBuilderX	免费	全平台	喜欢国产中文，不想折腾插件	⭐⭐⭐⭐
WebStorm	收费	全平台	大型前端项目，不适合初学	⭐
在线编辑器	免费	浏览器打开即可	临时小段代码测试，不做正式项目	⭐⭐

🎯最终新手选择建议：优先选择 VS Code，免费、全平台、行业主流，插件强大，学习、以后工作都用同一套工具。如果不想折腾插件，可以选 HBuilderX。记事本只用来做 1‑2 次体验，不要长期用来写代码。

新手常见坑点

❌坑 1：文件后缀名搞错，保存成.txt而不是.html

解决：电脑设置打开文件扩展名显示，文件名末尾一定写 .html。

❌坑 2：只打开单个文件，而不是打开整个文件夹

VS Code 一定要【打开文件夹】，不要直接打开单个 index.html，后期引入图片、CSS 文件才不会出错。

❌坑 3：以为编辑器可以看到网页效果，编辑器只是写代码，网页效果靠浏览器。
❌坑 4：不保存文件，直接看浏览器，页面不会更新！

修改代码后，一定要 Ctrl+S保存，浏览器才会读到最新代码。装 Live Server 后保存自动刷新。

本篇小结

HTML 编辑器是写代码的工具，真正渲染网页是浏览器，不同编辑器写出的网页效果完全一致。
记事本：零安装，但是没有高亮、补全，适合简单体验。
VS Code 是新手最推荐工具，记住 ! + Tab一键生成 HTML5 骨架，搭配 Live Server 插件实现保存自动刷新预览。
写代码一定要把文件放到一个项目文件夹内，保存后缀名必须是.html。

下一节预告

下一篇教程讲解：HTML 基础详解：标题、段落、换行、空格、注释，带大量可运行示例。