页面三件套
把网页想成一家商品小店三层分工，各管一件事
核心
前端三剑客就是HTML，CSS还有JS。
浏览器里的每一个页面，都可以拆成三层，就像开一家小店：
HTML 是骨架——店里有没有货架、收银台、购买按钮，先有这些「结构」，才知道店里有什么。
CSS 是装修——墙刷成黄色、灯箱字体多大、货架间距有多大，负责店里「长什么样」。
JS 是神经——点橱窗弹出不同商品、选择购买商品数量，让店「动起来」。
HTML · 骨架先决定「店里有什么」
比如你想在小店里加一个「购买」按钮——这就是在动骨架，该改的是 HTML：多出一个可点击的结构，浏览器才知道「这里有一个购买动作入口」。
CSS · 装修决定店里「长什么样」
比如你想把店面改成黄色——这就是装修，该改的是 CSS：背景色、强调色、边框。购买按钮还在，商品列表还在，只是整店看起来换了风格。
今日上架OPEN
邻里小卖部
今日三件好物 · 现做现售
- 手冲咖啡¥28
- 全麦吐司¥12
- 季节水果¥18
JS · 神经监听事件，驱动状态
神经回答的是行为：用户点了什么？鼠标滑动到了哪里，这些被称为事件
比如你想点小店橱窗的商品，下方显示商品的一段描述和购买按钮——这就是神经在干活：监听到点击事件，驱动状态，触发界面发生新的变化。
点橱窗试试LIVE
邻里小卖部
点下面任意橱窗 → 看状态与详情怎么变
手冲咖啡¥28
深烘单品，适合下午慢慢喝。
事件 · 点击「手冲咖啡」
状态 · selected = "coffee"
界面 · 详情显示「手冲咖啡」
小测 · 该改哪一层把需求连到 HTML / CSS / JS
练习QUIZ
需求连线：该改哪一层？
每条需求点选 HTML（骨架）/ CSS（装修）/ JS（神经）。全选完再交卷。
- 01
货架上少了「茶杯」这件商品，要补上去
- 02
把茶杯换成白色
- 03
增加蛋糕数量（从 1 块变成 3 块）
- 04
收银台旁新加一个「购买」按钮
- 05
店面墙壁刷成黄色
- 06
点橱窗弹出不同商品详情