夏末
全部笔记
18

HTML 纯页面 · 2026-10-09 · 约 7 分钟

Vibe Coding 01：先用一个 HTML 页面，做出能记账的小工具

作者： · 个人博客

从一笔午饭开始，用 HTML、CSS 和 JavaScript 做出能保存、回看、修改的记账页面，理解浏览器存储的用途和边界。

原文：本集视频

我是夏末。这一集，从一笔午饭开始。

午饭花了 32 元，想着晚上再记。等到晚上，外卖、打车、买水混在一起，又懒得逐笔回忆了。能不能先做一个小工具，花完钱顺手记一笔，之后还能找到、改正？

我把这笔虚构支出作为教学例子，让 AI 帮我做出第一版。这次只做一个在浏览器中运行的 HTML 页面，没有后端、账号和云同步。

!第一集封面：先做一个能用的HTML页面

第一个版本，先走完一笔账

“做记账软件”太宽了。个人回看支出、家庭共同记账、公司报销，虽然都涉及金额，后面的流程却不同。

这次我先选个人日常支出：金额必填，日期默认今天，分类提供常用选项，备注可以不写。保存后能回看，记错了能修改，明细和合计要一起变化。

自动导入、家庭共享和账号系统暂时放下。先把“记录—回看—纠正”这段流程做完整，才有一个可以交给人试用的小版本。

!第一集真实演示：保存32元午饭后，明细、合计和记录数

第一集早期演示的实际操作截图：1 笔记录，合计 32 元。示例日期为原录制日期，金额不是私人账单。

一个 HTML 文件，里面有三种分工

这里说的“HTML 纯页面”，指的是不用启动后端服务，也能在浏览器里运行。它并不意味着只有 HTML。

HTML 管页面有什么。 比如金额输入框、日期、保存按钮和支出明细。它描述内容与结构，本身不会替我们完成记账逻辑。

CSS 管页面怎么呈现。 金额框多大、按钮放哪里、明细如何排列，都由样式控制。布局能帮助人更快完成操作，但颜色好看不代表账记对了。

JavaScript 管页面里的交互。 点击保存后检查金额，把记录写入存储；点击修改后找到原记录，再更新明细和合计。这些行为需要程序逻辑。

第一集把这三部分放进同一个 index.html 文件。这样，拿到文件后可以在 Windows 上用 Edge 打开，不必先配置服务器或数据库服务。

!HTML、CSS、JavaScript与浏览器存储的分工示意

原创概念示意。页面在本机浏览器运行，记录先写入浏览器存储。

点下保存之后，记录放在哪里？

第一版使用 localStorage。可以先把它理解成网页在浏览器资料中使用的一块存储空间：页面把记录写进去，重新打开或刷新时再读出来。

但它不是“这台电脑所有网页共用的一份账本”。对于普通网站，存储按网页来源区分，也受到浏览器资料的隔离。MDN 对 localStorage 的说明

本集直接打开本地 HTML 文件，地址以 file: 开头。这样的存储行为在不同浏览器中可能有差异，所以要保留原文件位置，使用同一份浏览器资料，例如 Edge 中当前使用的那份个人资料。换浏览器、移动文件或清除数据，都可能让原记录不可见。

演示中，独立浏览器环境的账本为空，原环境里的记录仍然存在。这是第一版的使用边界：刷新还在，不等于换一台设备、换一个浏览器也在。

因此先用虚构数据体验，不把它当成重要账目的唯一副本。

让 AI 写之前，先把结果说清楚

我把任务分成两轮。

第一轮先对齐范围：给谁用、从哪个场景开始、需要完成哪些操作、哪些功能不做。让 AI 复述一遍流程和验收方法，先不写代码。

第二轮才让它交付页面和说明。要求除了“能保存”，还应包含“修改的是原记录”“明细和合计一致”“保存失败不能报成功”。

可以直接从这段任务描述开始：

用 HTML、CSS 和 JavaScript 实现一个本机记账页面，交付完整 index.html 和中文运行说明。支持新增、查看、修改支出；金额必须大于零，最多两位小数；记录存在当前浏览器 localStorage。修改时保留原记录 ID（区分每一笔账的编号），明细与合计使用同一组数据。界面说明不跨设备同步。先不做后端、账号、自动导入和收费。把实际执行过的检查与未执行项分开报告。

文件交出来后，我应该能离开 AI 聊天窗口，按说明独立打开和使用。

验收时，不只看“保存成功”

我连续跟着同一笔午饭检查：

  1. 新增 32 元，出现 1 笔记录，合计 32 元。
  2. 刷新页面，记录仍在。
  3. 把原记录改成 23 元，明细和合计都变为 23 元，仍然只有 1 笔。
  4. 输入 0 元，保存被拒绝，原账本不变。

!第一集真实演示：修改成23元后仍为一笔

原演示中的修改结果。这里核对的是明细、合计、记录数量的一致性，不是跨设备同步。

这一版还用稳定的记录 ID 区分每一笔支出。修改后 ID 不变，才能确认改的是原来的午饭，而不是重新增加一条。金额在代码里以整数“分”保存，23 元对应 2300 分。

如果发现问题，就把具体步骤、预期结果和实际现象交给 AI，修完后重复同一组检查。只说“有问题，修一下”，很容易让修改偏离目标。

页面能工作，接下来才看有没有用

这次通过的是功能检查。使用者会不会在下一次消费后再次打开、会在哪一步嫌麻烦、回看有没有帮助，仍然需要真实试用。

我把第一版作为最小可行产品（MVP），是为了尽早获得这些反馈，而不是因为它只有几个按钮。反馈如果指向“填写太麻烦”，就先简化输入；如果确实需要换设备回看，再考虑统一存储。

第二集沿着其中一条教学分支继续：让两个独立浏览器访问同一份记录，再由这个问题理解前端、后端和数据库。

第一集先做到这里：拿到一个能独立打开的页面，知道它怎样工作，也知道它做不到什么。

本集资料

本文对应第一集 HTML 本地版及重制 B 版的讲解。截图与操作结果整理自第一集已有录制资料。