Web Development with HTML, CSS, and JavaScript — 全书拆解¶
30 秒导读: 这是一本写给完全零基础的人的 Web 前端入门书——原书约 27.6 万字符,13 章, 回答一个问题:一个从没写过代码的人,怎么从零开始做出一个能在手机上也好看、能交互、能存数据的网站? 它的讲法是一条完整的流水线:先讲清浏览器怎么把页面画出来(第 1 章), 再依次教你三种语言——HTML 搭骨架、CSS 上妆、JavaScript 让页面活起来—— 最后用一章把三种语言合起来,从零造一个待办清单应用。 真正的价值不在任何单个知识点,而在它把「网页」这件事从黑箱讲成了流水线。
本组文档是我们重写的完整拆解,十三章。读完不必看原书。
1. 先交代清楚:这是谁在什么时候写的¶
| 作者 | Kevin Wilson,技术类入门书作者(同一出版社另有 Python、Excel 等入门书) |
| 成书时间 | 2026 年版,BPB Online 出版——讲的是 2024–2026 年这一代的工具与做法 |
| 面对的读者 | 完全零基础:书的第一章从「什么是 Web 开发」开始定义,连「浏览器是什么」都要讲 |
| 有没有利益相关 | 没有。是一本中立的入门教材;演示里推荐的工具(VS Code、Live Server、Google Fonts)都是这一行的通行选择,不是广告 |
一件事必须先说,否则会误读这本书的深浅:
它书名里的三样——HTML、CSS、JavaScript——是三种性质完全不同的语言,这本书把它们放进一条流水线里教。 HTML 是一门「给内容做记号」的语言(英文叫 markup language),只管结构,没有逻辑; CSS 是「声明式语言」,只管描述想要的样子,一行顺序执行的代码都没有; JavaScript 才是真正的编程语言,管逻辑和交互。 读后面的拆解章时,记住这条:三样工具的分工,就是这本书的目录结构(前言里作者自己也是这么概括全书的)1。
2. 全书一条主线(读完这一节,你就懂了这本书)¶
这本书是一条从头贯到尾的流水线:每一步的产物,是下一步的原料。 下面把这条线完整走一遍——不看后面任何一章,只读这一节,你也能把这本书讲给别人听。
细节全部留给对应的章节,这里只讲「发生了什么、为什么必须有这一步」。
① 先看清网页是怎么来的:你在浏览器里看到的,不是「一个文件」¶
你输入一个网址,背后发生的是:
浏览器带着网址去问服务器 → 服务器把 HTML、CSS、JavaScript 三类文件发回来
→ 浏览器从上到下读 HTML,一边读一边搭出一棵「结构树」(DOM 树)
→ 把 CSS 的规则套到树上的每个节点,算出每个字、每张图的位置和颜色
→ 执行 JavaScript,它随时可能改写这棵树 → 画到屏幕上
图说:网页不是一张画,是一棵不断被改写的树;每次改写都可能触发重画。
这是全书的地基。 后面所有章节——HTML 为什么是那个骨架、CSS 为什么按「优先级」层叠、 JavaScript 为什么能「选中某个元素再改掉它」——都是这棵树的具体展开。(第 01 章)
② 动手之前,得有一套能立刻看到结果的环境¶
写网页的门槛低到惊人:一个文本编辑器加一个浏览器就够。 书里给的标准配置是:VS Code 写代码、Live Server 插件做「保存即刷新」的本地预览、 一个项目一个文件夹。这条流水线(写 → 存 → 刷新 → 看)每一步都要几秒钟内见结果,否则学习反馈根本转不起来。(第 02 章)
③ 第一块积木:HTML 是一份带标注的文档¶
HTML 的做法是在文字外面包一层层标签:<h1> 表示「这是大标题」、<p> 表示「这是一段话」、
<a> 表示「这是一个链接」。浏览器不认排版,只认这些标注;你在页面上看到的字号、间距,
全是浏览器给这些标注配的默认样式。一份合法的 HTML 文档有一个固定骨架:
第一行声明文档类型,然后 <html> 包住 <head>(给浏览器看的元信息)和 <body>(给人看的内容)。(第 03 章)
④ 积木越来越多:表格、链接、列表、图、表单¶
有了骨架,往里填内容。书用一家虚构餐厅「Anna's Kitchen」当贯穿例子,把常用积木逐个教完: 文字怎么强调、菜单怎么用表格排、页面之间怎么用链接连、清单怎么用列表缩进, 图片/视频/音频怎么进页面(以及每张图都该有的替代文字),最后是全书 HTML 部分的顶点——表单: 让用户把数据交回来。表单背后是 Web 最原始的工作方式:填数据 → 用 GET 或 POST 发给服务器 → 服务器上的程序处理。(第 04–06 章)
⑤ 但默认样式没法看——CSS 接手:规则、冲突、盒模型¶
浏览器给的默认样式只是「能读」。CSS 让你写下规则:「所有 <h1> 用红色、24 像素」。
规则一多,冲突就来了:同一段文字既匹配「红色规则」又匹配「蓝色规则」,听谁的?
CSS 的答案是一套固定的裁判程序——行内样式压过文件里的、ID 压过类、类压过标签名,
同级的谁写在后面听谁的。这套「层叠优先级」是 CSS 最容易被初学者忽略、却决定生死的机制。
然后是盒模型:页面上每个元素都被看成一盒 content、外加内边距、边框、外边距一层层套着——
所有的间距、对齐、尺寸问题,最后都是这四个圈的算术。(第 07 章)
⑥ 把盒子摆到正确的位置:定位、flexbox、grid¶
盒模型告诉你盒子有多大,摆放靠三套机制:四种定位(静态、相对、绝对、固定)管「这个盒子相对谁」; flexbox 管「一排盒子怎么分一条轴上的空间」;grid 管「整个页面怎么切成行和列」。 书里给了一句今天仍然成立的分工口诀:一维用 flex,二维用 grid,老式的 float 只剩历史课意义。(第 08 章)
⑦ 屏幕有大有小:响应式设计¶
同一页面要在 375 像素宽的手机和 3840 像素宽的 4K 屏上都成立。办法是媒体查询:
「屏幕宽度小于 576 像素时,换成单列堆叠」这类条件规则;
配套的价值观叫移动优先——先为小屏写,再为大屏加码,而不是反过来做减法。
外加三个能算尺寸的函数 calc()、min()、max(),让「宽度 = 父容器八成再减 20 像素」这种话可以直接写进 CSS。(第 09 章)
⑧ 轮到真正的编程语言:JavaScript¶
HTML 和 CSS 都不是编程语言——它们不会算、不会判、不会记。让页面「活」起来的是 JavaScript:
变量存数据、if 判分支、循环跑重复、函数打包复用、数组和对象组织数据、类描述一类东西、
try...catch 兜住错误。这是全书最重的一章,因为它真的是一门语言,其余十二章用的都是它的「外围设施」。(第 11 章)
⑨ JavaScript 凭什么能改页面:DOM¶
浏览器读 HTML 搭出来的那棵结构树,在 JavaScript 眼里是一个可以随便改的数据结构——这就是 DOM。 JavaScript 通过它做四件事:选中一个元素(五种选法)、改掉它的内容/属性/样式、 增删元素、监听用户动作(点击、按键)并响应。网页从「文档」变成「程序」,就靠这一层接口。(第 12 章)
⑩ 合龙:从零造一个真的能用的应用¶
最后一章把前面九步全部走一遍:先定需求(能加任务、能标完成、能删、刷新不丢),
画一张界面草图,开三个文件(HTML 管结构、CSS 管样子、JavaScript 管行为),
用一个叫 localStorage 的浏览器内置仓库把任务存在访客自己的电脑上,
最后做四类测试(功能、界面、响应式、跨浏览器)——
并用开发者工具现场抓出一个人为埋下的拼写错误 bug,演示「调试就是顺着浏览器给的线索往回追」。(第 13 章)
一句话收尾¶
这本书给初学者的压缩版是:
HTML 把内容标出结构,CSS 给结构定样子,JavaScript 让样子听指挥;浏览器负责把它们三个跑给你看。
你在浏览器里看到的一切网页,包括最复杂的在线应用,底层都是这三层—— 这本书的价值,就是让你把这三层和它们之间的接缝一次性看清楚。
3. 十三章地图¶
这张表不用记任何术语——每章名字后面,写的是「读完你能回答什么问题」。
| 章 | 读完你就能回答 |
|---|---|
| 01 网页与浏览器 | 我在浏览器里看到的页面,背后发生了什么?前端和后端各管什么? |
| 02 开发环境 | 写网页需要装什么?为什么保存后浏览器里立刻能看到变化? |
| 03 第一个网页 | 一个最小的 HTML 文件长什么样?为什么浏览器知道哪行是标题?开发者工具是干什么的? |
| 04 HTML 元素 | 文字、表格、链接、列表这些常见内容,分别用哪种积木搭? |
| 05 图片、视频、音频 | 媒体怎么进页面?为什么每张图都要写替代文字?为什么不能一上来就放声音? |
| 06 表单 | 登录框、搜索框是怎么收用户数据的?填完的数据去了哪里? |
| 07 CSS 基础 | 样式规则怎么写?两条规则打架听谁的?为什么改个间距整页都会动? |
| 08 CSS 布局 | 怎么把盒子摆成一排、摆成网格、钉在屏幕顶上? |
| 09 响应式设计 | 同一份代码怎么在手机和电脑上都好看?什么是「移动优先」? |
| 10 表单与按钮的样式 | 为什么默认的输入框和按钮那么丑?怎么让按钮悬停时变色? |
| 11 JavaScript 基础 | 这门语言怎么存数据、判分支、跑循环、打包函数?数组和对象怎么组织数据? |
| 12 DOM | JavaScript 凭什么能改掉页面上的字?怎么知道用户点了哪里? |
| 13 从零造网站 | 把前面所有东西合起来,一个真能用的应用是怎么一步步长出来的? |
推荐顺序: 01 → 02 → …… → 13,这也是原书的顺序。 已经有基础的人:懂 HTML 的直接从 07 开始;写过别的语言的直接从 11 开始; 只想看「一个应用怎么长出来」的,只读 13 也够。
4. 这本书覆盖什么、不覆盖什么¶
这两张表和上面那张地图一个口径:不用记任何术语。
覆盖(而且讲得比多数免费材料清楚)——读完你能回答:
- 网页从网址到画面的完整链条,以及 HTML/CSS/JS 三样工具在这条链条上的分工;
- 为什么 CSS 的规则会「打架」,以及那套裁判程序(谁压过谁)具体怎么排;
- 盒模型、flexbox、grid 这三级布局机制各自解决什么问题、边界在哪;
- 响应式设计的完整打法:断点怎么选、移动优先是什么意思、怎么在电脑里模拟手机测试;
- JavaScript 作为一门语言的最小全集:变量、类型、分支与循环、函数、数组、对象、类、错误处理;
- DOM 编程的四件事(选中、修改、增删、监听),以及事件委托这个关键技巧;
- 一个完整小应用从头到尾的流程:规划、三文件工程、本地存储、四类测试、用开发者工具调 bug。
不覆盖(别指望在这本里找):
| 缺什么 | 说明 |
|---|---|
| 后端 | 服务器端语言、数据库、API 设计全部只有一句带过;表单处理只给一个最小的 Node.js 演示,跑通即收 |
| 框架与工程化 | React/Vue/Angular 只列名字;没有模块化、打包、npm 构建、TypeScript、任何测试框架 |
| CSS 的新前沿 | 容器查询、:has()、subgrid 等 2023 年后的新特性没有;Sass 只给了几行介绍 |
| 深入的语言机制 | JavaScript 的异步(Promise、async/await)只在保留字表里露个名;事件循环、fetch 网络请求不讲 |
| 上线 | 域名、托管、HTTPS 一个字没提;书停在「在本机 Live Server 里跑通」 |
| 无障碍与性能指标 | alt、label 有提但不成体系;SEO、性能度量(Core Web Vitals)没有 |
5. 我们的判断¶
判断(我们的,不是书里的): 这本书在今天的价值排序是—— ① 把「网页=三件套流水线」讲成一个完整闭环(对零基础仍是最短路径)> ② 各章知识点本身(HTML/CSS 的入门级内容网上免费材料很多,不差这一份)> ③ 第 13 章的完整流程示范(密度不高,但「规划→实现→测试→调试」一条线在入门书里少见)。 引用它的时候引①和③,别拿它当 CSS 或 JavaScript 的语法参考——那种参考它给不了。 如果错,会错在: 如果读者的目标其实是「尽快学会框架找工作」,这本书的 13 章会显得太慢, 它的价值只在「补课」场景成立——但那是定位问题,不是内容错误。
判断(我们的,不是书里的): 这本书最该带走的一个思维方式,是它反复演示的「保存即验证」: 每一章的每一步,都是改一行代码 → 存盘 → 浏览器立刻变样。 Web 前端是所有编程方向里反馈回路最短的一个,这本书把这一点用到了极致—— 学这类东西,先让回路转起来,再谈学得好不好。 这个原则可以复用到任何动手型学习上。 如果错,会错在: 如果一个人只靠读不动手,这条回路并不存在,这本书的讲法对他反而显得啰嗦。
判断(我们的,不是书里的): 读这本书要分清三个层次的声音—— 浏览器的规则(如「层叠优先级怎么排」)是硬事实,书里讲得对,可以照着用; 作者的推荐(如「暗色主题护眼」「移动优先」)是这一行的通行经验,有出处但不是定律; 作者的取舍(如 float 一句「别用了」)带着时代印记,读的时候要意识到这本书写于 grid 已经普及的年代。 如果错,会错在: 把通行经验当硬规则去引用(比如把「移动优先」讲成唯一正确做法), 会在具体项目里跟别的合理方案打架。
6. 许诺兑现表¶
这份拆解里每一处「第 N 章讲」「见下一节」,都在这里记一行、逐行核过。 核的是两件事:那一章真的讲了吗?讲的是不是许诺的那件事,而不是同名的另一件事。
| 许诺在哪 | 许诺了什么 | 应兑现在哪 | 核过了吗 |
|---|---|---|---|
| 本页 §2 ① | DOM 树与渲染链条的展开 | 01 §2、12 §2 |
✓ |
| 本页 §2 ③ | HTML 文档骨架的每一行 | 03 §3 |
✓ |
| 本页 §2 ④ | 表单与 GET/POST | 06 §2–4 |
✓ |
| 本页 §2 ⑤ | 层叠优先级的裁判程序 | 07 §3 |
✓ |
| 本页 §2 ⑥ | 定位/flexbox/grid 的分工 | 08 §3–5 |
✓ |
| 本页 §2 ⑦ | 媒体查询、移动优先、三个函数 | 09 §3–6 |
✓ |
| 本页 §2 ⑧ | JavaScript 语言最小全集 | 11 全章 |
✓ |
| 本页 §2 ⑨ | DOM 的四件事与事件监听 | 12 §3–6 |
✓ |
| 本页 §2 ⑩ | localStorage 与四类测试、调 bug | 13 §5–7 |
✓ |
| 本页 §3 地图 05 | 为什么图要有替代文字、别自动放声音 | 05 §3、§6 |
✓ |
| 本页 §3 地图 10 | 按钮悬停变色怎么实现 | 10 §4 |
✓ |
拆解写于 2026-10-19,依据 2026 年版(BPB Online)。原始书籍文件不入库,
本组文档是我们自己的重写;每条引用都可用 node scripts/book-verify.mjs web-development-html-css-js 回核。
-
出处:「Preface」第 5 段(
text/04-fm-preface.txt:5,搜「HTML for structure, CSS for style, and JavaScript for interactivity」)。作者在前言里自己概括了全书的教学法:先定义 Web 开发、介绍「三件套」分工,再搭环境、写第一个页面。全书的章节划分也见第 9 段(text/04-fm-preface.txt:9,搜「divided into 13 chapters」):13 章一条「从入门概念到实战建站」的直路。 ↩