工欲善其事，必先利其器。在拜会 Bootstrap 与 jQuery 之前，先把三样基本功练扎实： HTML 立骨架、CSS 裁外衣、JavaScript 点灵魂。这一回不再只是画路线图——我们一式一式地陪你练。
基础篇按先会不会、再熟不熟、最后全不全的顺序编排： 第一部分讲 HTML（网页的结构），第二部分讲 CSS（网页的样式），第三部分讲 JavaScript（网页的行为）。 每一式都是“讲解 → 现场演示 → 看源码 → 练功”的节奏； 读完之后，这一回还兼作字典：忘了某个标签、属性或方法，回头翻对应的一式即可。
修炼建议
- 按顺序读：三部分是从零搭起来的，跳着读容易断线；已有基础的话，也可从自己最弱的一式切入；
- 动手才算学过：每个演示都值得亲手改一改——改坏了刷新就重来，没有代价；
- 随时练手：打开练功场，HTML / CSS / JS 三栏随便写、即时看效果，代码存在你自己的浏览器里；
- 卡住先查：顶栏的搜索框（按 / 聚焦）能搜全站，包括这一回的每一式。
本回目录
三部分速览
本回规划四十三式：HTML 12 式、CSS 14 式、JavaScript 16 式，外加一式结业。 每一部分的最后一式都是综合修炼——把该部分学到的东西合成一个能跑的作品。
| 部分 | 式数 | 你会学到 | 练成标准 |
|---|---|---|---|
| HTML · 骨架 | 12 式 | 文档结构、文本、列表与链接、图片、音视频、表格、表单、语义化、全局属性、无障碍 | 能手写一个语义清晰、结构完整的页面 |
| CSS · 外衣 | 14 式 | 选择器与层叠、盒模型、单位与颜色、排版、背景边框、定位、Flex、Grid、响应式、过渡动画、变量 | 能独立排出一个响应式的多栏页面，并说清每个值的来历 |
| JavaScript · 灵魂 | 16 式 | 语法与类型、运算符、流程控制、函数与作用域、数组与对象、类与原型、错误处理、DOM、事件、异步、存储 | 能写脚本读取表单、操作页面、记住数据、处理异步 |
| 结业 | 1 式 | 回顾全篇、查文档的方法、下一步往哪走 | 有一张自己的“继续修行地图” |
把这一回当字典用
- 忘了标签怎么写？看侧边栏定位到对应的一式，正文里通常有一张属性速查表；
- 忘了某个取值是什么效果？用顶栏搜索（按 / 聚焦）搜属性名，命中即跳转；
- 想看真实效果？每一式的演示都可运行，源码就在效果下方，照着抄、随手改；
- 想要更细的条目？见下方“课外阅读”——那里是官方文档，负责把细节讲到穷尽。
课外阅读：MDN Web Docs
本站负责把知识讲成一条线，把新手从零带到能写能查； MDN Web Docs 则是网工的公共藏经阁：每个标签、属性、方法都有权威词条。 学完某一部分后，去 MDN 翻同主题的页面，看看还有哪些细节本站没展开——那是很有效的进阶练法。