Web Development with HTML, CSS, and JavaScript — 全书拆解Copy Anchor Link

30 秒导读: 这是一本写给完全零基础的人的 Web 前端入门书——原书约 27.6 万字符,13 章, 回答一个问题:一个从没写过代码的人,怎么从零开始做出一个能在手机上也好看、能交互、能存数据的网站? 它的讲法是一条完整的流水线:先讲清浏览器怎么把页面画出来(第 1 章), 再依次教你三种语言——HTML 搭骨架、CSS 上妆、JavaScript 让页面活起来—— 最后用一章把三种语言合起来,从零造一个待办清单应用。 真正的价值不在任何单个知识点,而在它把「网页」这件事从黑箱讲成了流水线。

本组文档是我们重写的完整拆解,十三章。读完不必看原书。

1. 先交代清楚:这是谁在什么时候写的Copy Anchor Link

一件事必须先说,否则会误读这本书的深浅:

它书名里的三样——HTML、CSS、JavaScript——是三种性质完全不同的语言,这本书把它们放进一条流水线里教。 HTML 是一门「给内容做记号」的语言(英文叫 markup language),只管结构,没有逻辑; CSS 是「声明式语言」,只管描述想要的样子,一行顺序执行的代码都没有; JavaScript 才是真正的编程语言,管逻辑和交互。 读后面的拆解章时,记住这条:三样工具的分工,就是这本书的目录结构(前言里作者自己也是这么概括全书的)¹。

2. 全书一条主线(读完这一节,你就懂了这本书)Copy Anchor Link

这本书是一条从头贯到尾的流水线:每一步的产物,是下一步的原料。 下面把这条线完整走一遍——不看后面任何一章,只读这一节,你也能把这本书讲给别人听。

细节全部留给对应的章节,这里只讲「发生了什么、为什么必须有这一步」。

① 先看清网页是怎么来的:你在浏览器里看到的,不是「一个文件」Copy Anchor Link

你输入一个网址,背后发生的是:

  浏览器带着网址去问服务器 → 服务器把 HTML、CSS、JavaScript 三类文件发回来
      → 浏览器从上到下读 HTML,一边读一边搭出一棵「结构树」(DOM 树)
      → 把 CSS 的规则套到树上的每个节点,算出每个字、每张图的位置和颜色
      → 执行 JavaScript,它随时可能改写这棵树 → 画到屏幕上

  图说:网页不是一张画,是一棵不断被改写的树;每次改写都可能触发重画。

这是全书的地基。 后面所有章节——HTML 为什么是那个骨架、CSS 为什么按「优先级」层叠、 JavaScript 为什么能「选中某个元素再改掉它」——都是这棵树的具体展开。(第 01 章)

② 动手之前,得有一套能立刻看到结果的环境Copy Anchor Link

写网页的门槛低到惊人:一个文本编辑器加一个浏览器就够。 书里给的标准配置是:VS Code 写代码、Live Server 插件做「保存即刷新」的本地预览、 一个项目一个文件夹。这条流水线(写 → 存 → 刷新 → 看)每一步都要几秒钟内见结果,否则学习反馈根本转不起来。(第 02 章)

③ 第一块积木:HTML 是一份带标注的文档Copy Anchor Link

HTML 的做法是在文字外面包一层层标签:<h1> 表示「这是大标题」、<p> 表示「这是一段话」、 <a> 表示「这是一个链接」。浏览器不认排版,只认这些标注;你在页面上看到的字号、间距, 全是浏览器给这些标注配的默认样式。一份合法的 HTML 文档有一个固定骨架: 第一行声明文档类型,然后 <html> 包住 <head>(给浏览器看的元信息)和 <body>(给人看的内容)。(第 03 章)

④ 积木越来越多:表格、链接、列表、图、表单Copy Anchor Link

有了骨架,往里填内容。书用一家虚构餐厅「Anna's Kitchen」当贯穿例子,把常用积木逐个教完: 文字怎么强调、菜单怎么用表格排、页面之间怎么用链接连、清单怎么用列表缩进, 图片/视频/音频怎么进页面(以及每张图都该有的替代文字),最后是全书 HTML 部分的顶点——表单: 让用户把数据交回来。表单背后是 Web 最原始的工作方式:填数据 → 用 GET 或 POST 发给服务器 → 服务器上的程序处理。(第 04–06 章)

⑤ 但默认样式没法看——CSS 接手:规则、冲突、盒模型Copy Anchor Link

浏览器给的默认样式只是「能读」。CSS 让你写下规则:「所有 <h1> 用红色、24 像素」。 规则一多,冲突就来了:同一段文字既匹配「红色规则」又匹配「蓝色规则」,听谁的? CSS 的答案是一套固定的裁判程序——行内样式压过文件里的、ID 压过类、类压过标签名, 同级的谁写在后面听谁的。这套「层叠优先级」是 CSS 最容易被初学者忽略、却决定生死的机制。 然后是盒模型:页面上每个元素都被看成一盒 content、外加内边距、边框、外边距一层层套着—— 所有的间距、对齐、尺寸问题,最后都是这四个圈的算术。(第 07 章)

⑥ 把盒子摆到正确的位置:定位、flexbox、gridCopy Anchor Link

盒模型告诉你盒子有多大,摆放靠三套机制:四种定位(静态、相对、绝对、固定)管「这个盒子相对谁」; flexbox 管「一排盒子怎么分一条轴上的空间」;grid 管「整个页面怎么切成行和列」。 书里给了一句今天仍然成立的分工口诀:一维用 flex,二维用 grid,老式的 float 只剩历史课意义。(第 08 章)

⑦ 屏幕有大有小:响应式设计Copy Anchor Link

同一页面要在 375 像素宽的手机和 3840 像素宽的 4K 屏上都成立。办法是媒体查询: 「屏幕宽度小于 576 像素时,换成单列堆叠」这类条件规则; 配套的价值观叫移动优先——先为小屏写,再为大屏加码,而不是反过来做减法。 外加三个能算尺寸的函数 calc()、min()、max(),让「宽度 = 父容器八成再减 20 像素」这种话可以直接写进 CSS。(第 09 章)

⑧ 轮到真正的编程语言:JavaScriptCopy Anchor Link

HTML 和 CSS 都不是编程语言——它们不会算、不会判、不会记。让页面「活」起来的是 JavaScript: 变量存数据、if 判分支、循环跑重复、函数打包复用、数组和对象组织数据、类描述一类东西、 try...catch 兜住错误。这是全书最重的一章,因为它真的是一门语言,其余十二章用的都是它的「外围设施」。(第 11 章)

⑨ JavaScript 凭什么能改页面:DOMCopy Anchor Link

浏览器读 HTML 搭出来的那棵结构树,在 JavaScript 眼里是一个可以随便改的数据结构——这就是 DOM。 JavaScript 通过它做四件事:选中一个元素(五种选法)、改掉它的内容/属性/样式、 增删元素、监听用户动作(点击、按键)并响应。网页从「文档」变成「程序」,就靠这一层接口。(第 12 章)

⑩ 合龙:从零造一个真的能用的应用Copy Anchor Link

最后一章把前面九步全部走一遍:先定需求(能加任务、能标完成、能删、刷新不丢), 画一张界面草图,开三个文件(HTML 管结构、CSS 管样子、JavaScript 管行为), 用一个叫 localStorage 的浏览器内置仓库把任务存在访客自己的电脑上, 最后做四类测试(功能、界面、响应式、跨浏览器)—— 并用开发者工具现场抓出一个人为埋下的拼写错误 bug,演示「调试就是顺着浏览器给的线索往回追」。(第 13 章)

一句话收尾Copy Anchor Link

这本书给初学者的压缩版是:

HTML 把内容标出结构,CSS 给结构定样子,JavaScript 让样子听指挥;浏览器负责把它们三个跑给你看。

你在浏览器里看到的一切网页,包括最复杂的在线应用,底层都是这三层—— 这本书的价值,就是让你把这三层和它们之间的接缝一次性看清楚。

3. 十三章地图Copy Anchor Link

这张表不用记任何术语——每章名字后面,写的是「读完你能回答什么问题」。

推荐顺序: 01 → 02 → …… → 13,这也是原书的顺序。 已经有基础的人:懂 HTML 的直接从 07 开始;写过别的语言的直接从 11 开始; 只想看「一个应用怎么长出来」的,只读 13 也够。

4. 这本书覆盖什么、不覆盖什么Copy Anchor Link

这两张表和上面那张地图一个口径:不用记任何术语。

覆盖(而且讲得比多数免费材料清楚)——读完你能回答:

• 网页从网址到画面的完整链条,以及 HTML/CSS/JS 三样工具在这条链条上的分工;
• 为什么 CSS 的规则会「打架」,以及那套裁判程序(谁压过谁)具体怎么排;
• 盒模型、flexbox、grid 这三级布局机制各自解决什么问题、边界在哪;
• 响应式设计的完整打法:断点怎么选、移动优先是什么意思、怎么在电脑里模拟手机测试;
• JavaScript 作为一门语言的最小全集:变量、类型、分支与循环、函数、数组、对象、类、错误处理;
• DOM 编程的四件事(选中、修改、增删、监听),以及事件委托这个关键技巧;
• 一个完整小应用从头到尾的流程:规划、三文件工程、本地存储、四类测试、用开发者工具调 bug。

不覆盖(别指望在这本里找):

5. 我们的判断Copy Anchor Link

判断(我们的,不是书里的): 这本书在今天的价值排序是—— ① 把「网页=三件套流水线」讲成一个完整闭环(对零基础仍是最短路径)> ② 各章知识点本身(HTML/CSS 的入门级内容网上免费材料很多,不差这一份)> ③ 第 13 章的完整流程示范(密度不高,但「规划→实现→测试→调试」一条线在入门书里少见)。 引用它的时候引①和③,别拿它当 CSS 或 JavaScript 的语法参考——那种参考它给不了。 如果错,会错在: 如果读者的目标其实是「尽快学会框架找工作」,这本书的 13 章会显得太慢, 它的价值只在「补课」场景成立——但那是定位问题,不是内容错误。

判断(我们的,不是书里的): 这本书最该带走的一个思维方式,是它反复演示的**「保存即验证」**: 每一章的每一步,都是改一行代码 → 存盘 → 浏览器立刻变样。 Web 前端是所有编程方向里反馈回路最短的一个,这本书把这一点用到了极致—— 学这类东西,先让回路转起来,再谈学得好不好。 这个原则可以复用到任何动手型学习上。 如果错,会错在: 如果一个人只靠读不动手,这条回路并不存在,这本书的讲法对他反而显得啰嗦。

判断(我们的,不是书里的): 读这本书要分清三个层次的声音—— 浏览器的规则(如「层叠优先级怎么排」)是硬事实,书里讲得对,可以照着用; 作者的推荐(如「暗色主题护眼」「移动优先」)是这一行的通行经验,有出处但不是定律; 作者的取舍(如 float 一句「别用了」)带着时代印记,读的时候要意识到这本书写于 grid 已经普及的年代。 如果错,会错在: 把通行经验当硬规则去引用(比如把「移动优先」讲成唯一正确做法), 会在具体项目里跟别的合理方案打架。

6. 许诺兑现表Copy Anchor Link

这份拆解里每一处「第 N 章讲」「见下一节」,都在这里记一行、逐行核过。 核的是两件事:那一章真的讲了吗?讲的是不是许诺的那件事,而不是同名的另一件事。

拆解写于 2026-10-19,依据 2026 年版(BPB Online)。原始书籍文件不入库, 本组文档是我们自己的重写;每条引用都可用 node scripts/book-verify.mjs web-development-html-css-js 回核。