改 HTML，用可视化编辑器还是代码编辑器

这问题坏就坏在那个「还是」。它摆出一副擂台的架势——可这里根本没有擂台。可视化编辑器和代码编辑器，谁也没有一劳永逸地赢——赢的是谁，看你手上正在改的是什么。改个标题、一个链接、一张图？可视化更快。重排结构、设一个精确的属性、弄懂标签怎么套在一起？那是代码的活。而我自己真正会去拿的那个工具，把两样并排给你，还让它们时时同步。

所以别再把它俩当对手了。按活儿来分，才对。

两个工具，回答的是两个问题

可视化编辑器——所谓 WYSIWYG，「所见即所得」——把渲染好的页面给你看，让你在上面点、在上面打字。你改文字、放张图、给按钮换个颜色，底下的标记自己更新，你一个标签都不用读。你改的，是结果。

代码编辑器给你看的是源码。每一个 <div>、每一个类名、每一个属性，明明白白摆在那儿，等你亲手改。你改的，是生成那个结果的那套指令。

分野就这么一条。一个让你碰页面；另一个让你碰做出页面的代码。问「哪个更好」，其实是在问一张页面和它背后的代码谁更好——这不成话。你要的，是此刻脑子里那个改动，正好对得上的那一个。

想要一张更大的地图，把打开、修改一个文件的各种路数都摊开看，我写在 怎么编辑 HTML 文件 里了。这篇，只取其中一个岔口：可视化，还是代码。

每个改动，各归各的列

常见的活儿，我会这么分——不看哪个工具「更强」，只看哪个让你少费点劲儿就到手。

你要做的改动	该拿	为什么
改文字、一个链接、或一张图	可视化 / WYSIWYG	你一改就看见结果，不必满地找标签
重排结构——嵌套、调顺序、加板块	代码编辑器	你得亲眼看见、亲手挪那些标签
设精确的属性（一个 aria-label、一个 data- 值、一个确切的宽度）	代码编辑器	页面上没有可点的把手，一次点击抓不住它
弄懂 HTML 到底怎么运作	代码编辑器	图的就是读标签、写标签，不是把它们藏起来
把页面交给不写代码的人去改文字	纯文本可视化模式	它锁住排版，改几个字也动不了设计
找出你看得见的东西背后的代码	双向同步的编辑器	点一下那个元素，它就跳到对应的那一行

关于可视化还是代码的争论，多半其实是两个人各自盯着这张表的不同行，你说你的、我说我的。

也得给代码编辑器一个公道

我做的是可视化工具，那更该替对面说句公道话，因为它当得起。

凡是动结构的活，代码赢，而且不是小赢。把一节挪到另一节上头，把三个元素裹进一个新容器，把缩进理顺到你终于读得下去——这时候你就想让标签摊在眼前。可视化在这儿会跟你较劲。你一点，却总拿不准自己抓到的是哪个元素。

精确的属性，也是同一个道理。页面上没有哪个按钮对应 aria-label 或 data-id，没东西可点。在代码里，你直接打出来就是。

而要是你的目标是学 HTML，可视化编辑器就是选错了课堂。它天生就是来藏标签的。学，意味着看见它们、弄坏它们、再修好它们。像我在 几款主流免费 HTML 编辑器 里挨个走过的那种代码沙盒，做这件事，胜过任何点一点、选一选。

所以，不，我不是来告诉你代码编辑器过气了。相当大一块真活儿，它就是那把对的刀。

很多时候，你会改到一半就想换

这正是那个「还是」藏起来的东西。真实的改动，大多不是二选一。它俩是一起来的，就在同一个五分钟里。

比方说你在给一张 AI 生成的页面收尾。你把标题重打一遍——可视化，两秒搞定。接着你发现按钮指错了地方，而那个链接不是看得见的文字，是埋在标签里的一个 href，这下你想要代码了。改完你又想再看看整页，确认它还摆得正。可视化、代码、可视化，全在一件小事里头。

要是你这两样工具是分开的——一个浏览器用来看，一个文本编辑器管源码——那你这一改，时间全花在存盘、切窗口、刷新上了。每次那点切换成本都小得很，可一个下午累下来，就大了。这才是「哪个更好」问错了的真正原因。你要的不是其中一个。你要的是别再为了在两者之间来回，一趟趟交过路费。

还有一种，你根本不用选

这就是我做 HTML Tweak 要补的那个缺口。它把可视化的页面和代码并排摆着，同步——改页面，代码跟着变；改代码，页面跟着变。你点一样看得见的东西，它替你把对应的代码定位出来，满地找标签的事，大半就省了。

给不写代码的人用，还有一个纯文本模式，把结构和样式都锁住，同事只能重写文案，排版他动都动不了。想再往深走，还有「先问一句」模式和完整模式候着。

再说说边角。它打开的是一个 .html 文件——不是替你管一个多文件 React 或 Next 项目的东西。它在浏览器里免费跑，也能当一个离线的单文件留在手边；头一回打开要联网，之后它就缓存下来，断网也能用。在 Chrome 或 Edge 里，它直接存回你的文件；别的浏览器，给你一份下载的副本。两种情形，都不用注册。

要盖一整个站，它替不了代码编辑器。它替掉的，是你给一个页面收尾时那没完没了的切窗口。

我见得最多的几个错

浪费，几乎总能追到同一个念头上——把「可视化还是代码」当成一锤子定音、管整个活的决定，而不是每个改动都重新掂量一次。它露头，有三种样子。

给整件活挑定一条道。你认定「这是代码活」，于是一个五秒钟就能改完的文字，你却在生标签里硬磨；或者你认定「这是可视化活」，回头那个没把手的属性，你怎么都设不上。活儿本身没有道。是每一个单独的改动，才各有各的道。

在一个排版要紧的页面上跑 WYSIWYG，然后眼看着它走样。有些可视化编辑器一边改一边重写标记，你动一下文案，间距就挪了一格。要是保住设计才是正事，你要的是锁住结构的编辑，不是由着它撒欢。

学东西却拿错了工具。你要是想弄懂 HTML，别拿可视化编辑器把它埋了——去读标签。反过来也一样算。一个点一下就能了结的活，你偏在代码里死磨，同样在糟蹋你一天的工夫，只是方向反了过来。

所以，给你个小小的激将。下回你又逮着自己在可视化和代码之间掂量，把这问题回绝掉。用 HTML Tweak 打开那个文件，让代码贴着页面摆，每个改动要哪样，你就切哪样。