摘要
需求卡丢进去，几十秒后我的文件夹里多了一个 .html 文件。双击，跑起来了——八年运维生涯里第一个"我自己造的"应用。这篇讲单文件 HTML 为什么适合零基础、网页三件套各管什么人话版，以及我按计划留的那个坑：刷新，数据全没了。
话题标签：#WorkBuddy #AI写代码 #零代码 #HTML
开工那天，我干的唯一的事是按下回车
需求卡写好了（上一篇），我开了一个做一做会话，第一步不是说话，是把需求卡原封不动贴进去，然后补了一句话：
这是需求卡。今天只做【必须有】里的四条，【最好有】一条都不做。完成后告诉我文件在哪、我怎么打开。
它回了几句确认，然后开始干活。我看着它新建文件、写代码——说实话，看着一大片 div 和分号在屏幕上滚，我的感受不是激动，是和我看别人写的 Perl 脚本一个感受：每个字符都认识，连在一起是天书。
几十秒后它说：做完了，文件在这里。
我到文件夹里一看：一个文件，todo.html，几十 KB。
我八年运维生涯里亲手部署过上千个服务，但那一刻感觉完全不同——这是第一个"我自己造的"东西，虽然我一个字都没写。
双击，跑起来了
接下来是我人生中值得记一下的三十秒。
我双击那个文件。浏览器开了。
一个朴素的页面：标题、输入框、一个按钮、下面空荡荡的列表。丑，真的很丑，像 1995 年的网页。但功能都在：
我输入"审一下今晚的发布窗口"，回车，它出现在列表里。我打勾，它划掉了。我再输入一条，再删一条。全通了。
按需求卡里的验收标准，四条，一条条对：
- ✅ 添加、删除、打勾——过
- ⏳ 数据存本机——这条我自己排期到下一轮，暂时没做（马上讲）
- ✅ 双击就能打开，没装任何环境——过
- ✅ 界面干净——勉强算过，"干净"到有点寒碜
第一次验收就这么过了。它甚至主动附了一段说明："存储功能按你的分期计划放在下一轮，当前版本数据仅保存在内存中，刷新后会丢失，请注意。"
它还提醒我了。这个细节让我对它的好感度上升——好的交付物不是假装完事了，是把边界说清楚。这跟我在变更单里写"本次变更不包含 XX"是一个道理。
网页三件套，运维版翻译
那天晚上我干了一件早就该干的事：打开那个文件，读它。
不是我突然学会前端了——是我发现这文件的结构意外地好懂，因为用运维的眼光翻译一下，一个网页就是一台机器的三个部分：
| 前端术语 | 它是什么 | 运维版理解 |
|---|---|---|
| HTML | 页面上有什么：输入框、按钮、列表 | 硬件清单——这台机器有哪些部件 |
| CSS | 这些东西长什么样：颜色、字体、间距 | 机房标准化——部件怎么摆放、喷什么漆 |
| JavaScript | 这些东西怎么动：点击之后发生什么 | 自动化脚本——事件触发时执行的动作 |
而我那个文件里，三件套全在一个 .html 里。这种"全塞一个文件"的做法，在正经开发里是要被 code review 打回来的，但对零基础的人是天大的好事：
- 不用装环境。不需要 Node，不需要 Python，不需要任何运行时。浏览器就是运行时，每台电脑都自带
- 不占端口、不起服务。
file://协议直接打开，连 localhost 都不用 - 就一个文件。备份=复制，分享=发送，删库=删除。没有比这更简单的部署单元了
我这些年接手过依赖地狱般的老系统，见过光是把服务跑起来就要装十几个包的项目。一个双击就能跑的单文件，对零基础的人是尊严问题——你第一次造东西，不应该花在配环境上。
F5 之殇：我自己埋的坑，炸的时候还是心里一紧
然后是那个我在需求卡里亲手排期的坑。
我把第 02 篇记的"审发布窗口"之类几条真实待办录进去，用了几分钟，感觉不错。然后我手贱按了 F5。
列表空了。
我在按下 F5 的那一瞬间就想起来了——存储我自己排到下一轮了，这个版本数据在内存里，刷新即丢。道理我全懂。但看着自己刚录的待办消失的那一秒，还是有一种裸奔的恐慌。
这恐慌我是熟的。干运维的都懂：没有持久化的数据，等于没有数据。内存里的东西，进程一挂就没了，这在我们的世界里是常识中的常识。我在需求卡里写"数据必须保存在本机、看得见、带得走"，就是冲着这个去的——但我为了先看交互，亲手把这条排到了下一期。
这就是分期的代价。你明知道它是坑，但为了推进度，你还是把它留到了下一个变更窗口。
好在，下一期不用等太久。这就是下一篇的主戏：我跟它谈判数据存储方案的过程——它先给了个最常见的方案，我打开一看是黑盒，退回去了。最后我们落在 SQLite 上，一个我能用 sqlite3 命令行打开的、货真价实的数据库。
那是我整个系列里最来劲的一段。下一篇见。
