Web-Dev-For-Beginners，从零建一个网站

01一个反共识：三件套不是"三个语言"，是三层职责

新手常把 HTML/CSS/JS 当成"三种要学的语言"，背语法背到崩溃。其实它们是三层职责，各管一件事，分工明确：

一个按钮：<button>点我</button> 是 HTML（结构），background:blue 是 CSS（样式），onclick=alert() 是 JS（行为）。三层分离是前端的根本纪律：HTML 里别写样式（用 class 不用 style 属性），CSS 里别写逻辑，JS 里别直接拼 HTML（用模板）。混着写一时爽，改起来三处崩。这就是为什么 React/Vue 要发明组件——本质是"把三层的对应关系打包"，不是消灭三层。

02三件套填空：补全代码看页面怎么变

下面三栏各有一个空缺（蓝框），从下方备选词里点选填入。填对三栏，右侧预览会变成一个能点击的蓝色按钮。点"运行"看效果。

03从零建站的正确顺序：结构→样式→行为

新手建站常犯的错是顺序反了——先想"页面要好看"，于是先写 CSS，结果 HTML 结构没搭好，CSS 全是补丁。正确顺序是：

1. 先 HTML：用语义标签（header/nav/main/article/footer）搭骨架，不写任何样式。这步只问"页面有什么"。
2. 再 CSS：在骨架上加样式，用 class 不用内联 style。这步只问"长什么样"。
3. 最后 JS：加交互，用 addEventListener 不用 onclick 属性。这步只问"怎么动"。

这个顺序的好处：每一步都能独立验证。HTML 写完用浏览器打开，能看到内容（虽然丑）；CSS 加上变好看；JS 加上能动。如果先写 CSS 再写 HTML，CSS 没东西可装饰，你不知道写得对不对。这就是"渐进增强"的工程思想——从最基础能用的版本，逐步加层。顺序对了，调试也对了：页面坏了先看 HTML 在不在，再看 CSS 对不对，最后看 JS 有没有报错。

04框架时代，为什么还要学三件套

有人问：现在都 React/Vue 了，还学三件套干嘛？因为框架是三件套的封装，不是替代。

• React 的 JSX 是 HTML 的扩展，不懂 HTML 标签语义，写出的 JSX 一团乱。
• Tailwind/CSS-in-JS 是 CSS 的封装，不懂 CSS 盒模型/层叠，调样式全靠猜。
• React 的 useEffect/事件系统是 JS 的封装，不懂闭包/事件循环，bug 找不到。

框架帮你省的是样板代码，不是底层理解。三件套是地基，框架是楼。地基没打牢，楼越高越晃。所以学前端正确路径是：三件套打牢 → 用三件套做几个小项目 → 再上框架，而不是直接学 React。直接学框架的人，遇到框架抽象不到的问题（性能、SEO、浏览器兼容）就卡住，因为他们不知道框架下面是什么。

05带走这套清单