我们可以用什么编写HTML文档

记事本。编写真的文档，就是编写Windows自带那个蓝底白字的notepad.exe。我2015年第一次写HTML，文档用的编写就是它，保存时把后缀改成.html，文档双击打开，编写浏览器里出现一行黑色宋体字——“Hello,文档 world”，那一刻感觉像在黑暗里划亮了一根火柴。编写

但记事本有个毛病：没有语法高亮，文档标签写错一个字母，编写页面就白屏给你看。文档你盯着那堆纯文本，编写像在审讯一个拒不开口的文档嫌疑人。所以我很快转投了Notepad++，编写体积小，启动快，标签自动补全，括号高亮配对。它陪我写了大概两百个练习页面，直到某天我同事凑过来看了一眼，说：“你怎么还在用这种古董？”

他推荐了Visual Studio Code。说实话，第一次打开VS Code我是懵的——左侧资源管理器、底部终端、右上角那个“运行”按钮，密密麻麻的图标像飞机驾驶舱。但用了一周后我就回不去了。智能提示会在我输入<di的时候弹出<div>的补全，按个Tab就搞定。更爽的是Emmet插件，输入ul>li*5再按Tab，直接生成五个列表项，手写的话得敲几十个字符。

不过工具越强大，越容易让人忽略基础。我有次面试一个前端岗位的候选人，简历上写着“精通VS Code”，我问他<table>和<div>布局的区别，他愣了十秒，然后开始讲插件配置。那场面试让我意识到：编辑器只是笔，你得先会写字，再谈用什么笔写。

纯文本编辑器之外，还有一类所见即所得工具，比如Adobe Dreamweaver。2018年我帮一个朋友改他的个人网站，他用的是Dreamweaver的“设计视图”——拖拽图片、点按钮加链接，代码窗口在下面自动生成。那玩意儿对纯新手友好，但生成的代码臃肿得吓人，一个简单的导航栏能嵌套五层<div>，CSS里全是!important。我花了一个通宵把那些垃圾代码清理干净，后来他再问我怎么改页面，我都直接让他把HTML发过来，用VS Code手动改。

如果你用的是Mac，那TextEdit也能用，但记得在“格式”菜单里选“制作纯文本”，否则保存的.html文件会带富文本格式的隐藏字符，浏览器解析时直接乱码。我见过一个学员拿TextEdit写了半天，页面死活不显示，最后发现是格式没切换——那表情，像发现炒菜忘了放盐。

还有一类人用在线编辑器，比如CodePen或JSFiddle。它们的好处是零安装，打开浏览器就能写，还能实时预览。我写小demo或调试某个CSS效果时常用CodePen，左侧写HTML，右侧立刻渲染，按Ctrl+S还能保存快照。但它的缺点是文件存在云端，离线时没法用，而且写大项目时界面会卡——毕竟人家定位是“片段试验田”，不是完整开发环境。

最后说个偏门的：手机上的编辑器。有次我在高铁上临时要改一个页面，手边没电脑，就用手机装了“Acode”这个App，在触屏上敲代码。那体验就像用筷子吃意大利面——能吃饱，但费劲。不过应急确实管用，改个文字颜色、调个边距，勉强能应付。

绕了一圈，你会发现选什么工具取决于你要干什么。写个简历页面，记事本都嫌多；做个静态网站，VS Code绰绰有余；搞前端工程化项目，那得用WebStorm或VSCode配一堆插件。但别让工具绑架你的学习——我见过有人花两周折腾编辑器主题、字体、快捷键，结果连<html>和<body>的关系都没搞明白。代码是你敲出来的，不是编辑器替你写的。

所以，从你手边最朴素的那个文本工具开始。双击打开，敲下<!DOCTYPE html>，保存，刷新浏览器。等你在这一行行代码里摔过跤、踩过坑，再回头挑顺手的编辑器——那时候你才真正知道，自己需要的是拐杖，还是跑鞋。