古法前端入门

先来介绍本连载的两位主角。

氛围编程（Vibe Coding）是 OpenAI 创始成员之一安德烈・卡帕西在 2025 年 2 月起的名字。它指用自然语言请 AI 写代码，对生成的代码不细看，凭“氛围”（Vibe）接受并往下推进的做法。这个词流行到被英国柯林斯词典评为 2025 年度词汇。本博客也在开发指南Vibe Coding 札记中写过它。本连载的“古法”，指的就是它的反面。

让 AI 写确实快。但本连载仍然坚持亲手写，理由有三。

• AI 写的代码，负责的仍然是人 ── 报销系统处理的是钱。合计差 1 日元、输入校验有漏洞，都得有人读代码才能发现。看不懂的代码，既没法检查，也没法修改
• 基础不会变 ── 不管是 AI 写的，还是用 React、Vue 做的，最终交给浏览器的都是 HTML、CSS 和 JavaScript。打好基础，不管拿到什么代码都能看清里面
• 古法工具至今仍在服役 ── 据调查公司 W3Techs 统计，截至 2026 年 10 月，jQuery 被约 64.5% 的受调查网站使用，Bootstrap 在 CSS 框架中约占 75%。公司内部的业务系统里就更多了

报销，就是员工把垫付的钱（电车费、出差住宿费等）向公司申请，上司审批，财务再把钱还给员工的机制。下图画出了相关人员和申请的流转过程。

本连载要实现的功能大致如下。

还有一些必须遵守的规则。和开发指南Playwright 入门与实战里测试过的报销页面一样，比如“合计 3 万日元以上必须附收据”“不能申请未来的日期”“美元明细要换算成日元”等。如何在页面上落实这些规则，第 9 讲会详细讲解。

1. 下单（请求） ── 浏览器向 URL 指向的服务器说“请给我这个页面”
2. 送达（响应） ── 服务器返回 HTML。HTML 里写到的 CSS、JavaScript 文件，浏览器也会接着去取
3. 解读 ── 读取 HTML，生成页面部件的树（DOM）。读取 CSS，生成外观规则的清单（CSSOM）。两者合并成只包含要显示部件的树（渲染树）
4. 摆放（布局） ── 根据屏幕宽度，计算每个部件的位置和大小
5. 上色（绘制） ── 把文字和颜色画到屏幕的像素上

这里的关键是 DOM。JavaScript 改变页面时，改写的不是 HTML 文件本身，而是浏览器内部的 DOM。每改写一次，④⑤ 就要重来，所以随意改写会让页面变卡。这一点在第 8 讲还会再提到。

前端的三种语言，用身体来比喻最好懂。

百闻不如一见。我们在同一个申请表单上，依次加上这三样。

只有 ① HTML 时，输入框和按钮其实也能用：能打字，也能点按钮。只是外观朴素，合计一直是 0。② 加上 CSS 后，有了业务系统的样子，但它不会帮你计算。计算和点击后的反应，是 JavaScript 的工作。各自加的代码如下（节选）。

<!-- ① HTML：有什么 -->
<p>合计: <output id="total">0</output> 日元</p>
<button type="button" id="send">提交申请</button>

/* ② CSS：看起来怎样 */
button { background: #c0392b; color: #fff; border-radius: 8px; }

// ③ JavaScript：怎么动
document.querySelector('#send').addEventListener('click', () => {
  document.querySelector('#toast').hidden = false;
});

现在看不懂也没关系。HTML 在第 2〜3 讲，CSS 在第 4〜6 讲，JavaScript 在第 7〜10 讲，我们会一样一样地学会读写。

既然叫“古法”，就稍微讲点往事。

• 1991 年 ── CERN（欧洲核子研究组织）的蒂姆・伯纳斯-李把 Web 在互联网上向公众公开。第一台 Web 服务器是 info.cern.ch
• 1994〜96 年 ── 哈肯・维姆・莱提出 CSS（1994 年 10 月）。1996 年 12 月 CSS1 成为 W3C 推荐标准，“外观与 HTML 分开写”的理念从此确立
• 1995 年 ── 网景公司的布兰登・艾克在 5 月仅用 10 天做出了 JavaScript 的第一个原型，并于 12 月正式发布
• 2006 年 ── 约翰・雷西格发布 jQuery。它抹平了各浏览器之间五花八门的写法差异，迅速流行开来
• 2011 年 ── Twitter 公司的两位工程师（马克・奥托和雅各布・桑顿）公开了 Bootstrap
• 2021 年 ── Bootstrap 5 不再需要原先必须搭配的 jQuery
• 2026 年 ── 1 月，jQuery 4.0 作为时隔约 10 年的大版本发布（停止支持 IE 10 及更早版本）。10 月，Bootstrap 6 的第一个 Alpha 版也已公开

本连载计划使用写作时的稳定版 Bootstrap 5.3 系列和 jQuery 4.0 系列。

就像盖房子之前要画户型图，做页面之前也要先画设计图。首先是页面清单和页面之间的跳转关系。下面的小字是主要制作该页面的讲次。

接着，把最重要的申请表单画得细一点。这种省略颜色和装饰、只画“什么东西放在哪里”的图，叫作线框图。

画了设计图，很多问题在动手前就能发现。比如“明细超过 10 行时怎么显示？”“收据只能是图片吗？PDF 呢？”“会有人用手机提交申请吗？”。先把这些问题列出来，就能减少返工。

需要的工具只有三样，而且都免费。

还有一样重要的工具，就是浏览器自带的开发者工具（DevTools）。它相当于页面的“X 光片”，本连载几乎每一讲都会用到。

文件按职责放进不同的文件夹（本讲只做 index.html）。

准备好之后，来做第一个页面。一共 5 步。

1. 在电脑上新建一个名为 keihi 的文件夹，在 VS Code 里用“打开文件夹”打开它
2. 新建 index.html，写入下面的代码并保存（在空文件里输入 ! 再按 Tab 键，模板会一下子出来）
3. 安装 Live Preview 扩展，点击编辑器右上角的预览按钮（或用右键菜单）打开预览
4. 改一改文字再保存，确认预览会自动跟着变化
5. 在浏览器中打开后，按 F12（Mac 按 Cmd + Option + I）打开开发者工具，在 Elements 标签页里找找 h1

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>报销系统</title>
</head>
<body>
  <h1>报销系统</h1>
  <p>这里目前是一块工地。</p>
  <p>第2讲开始动工。</p>
</body>
</html>

现在，我们故意犯个错。删掉 </h1>（标题的结束标签）再保存……

在开发者工具的 Elements 标签页里一看，就会发现两个段落跑进了 h1 里面。“外观不对劲时，先到 Elements 里确认树的形状”，这是本连载会反复用到的调试第一步。

最后来看看接下来的路程。我们坐慢车，一站一站往前走。

前半段（第 2〜10 讲）逐一掌握三种语言，后半段（第 11〜15 讲）把它们组合起来，完成业务系统该有的功能。之所以在第 14 讲才讲 jQuery，是因为先用原生 JavaScript 亲手写一遍，才能真正体会 jQuery 帮你省了哪些事。