网页三层：HTML / CSS / JS 各管什么
结构、样式、行为各司其职——看懂三件套，页面在你眼里就透明了。
学习证据 学完后，怎么核对？
把学习结果留在一个可以回看、可以复做的动作里；这一区只写学生能自己检查的证据。
如何核对
- 可离线运行的网页产物
- 功能与无障碍验收
适用边界
用于静态网页与基础交互；生产网站还需安全、性能、兼容性和部署流程。
最后复核
这是内容复核日期，不是学习截止日期。
讲
例子右键「查看网页源代码」，一锅粥
阿凯在一个很喜欢的网页上点右键「查看网页源代码」，想偷学两招——满屏尖括号、花括号、英文单词搅成一团，像一锅粥。他默默关掉：「这是给人看的吗？」其实那锅粥只是三种语言站错了队。把它们各归各位，任何网页在你眼里都是透明的。
初中站回看：一个文件就是一个网站 —— 那时一个 HTML 文件包打天下；现在把它拆成三件套、各管一层，项目再大也不乱。名词网页开发通常分成三层：HTML、CSS、JS（JavaScript）。你见过的每个网页——从搜索引擎到这门课——拆到底都离不开这三层。
定义三件套＝结构、样式、行为三层分工
HTML 管结构：这是标题、这是段落、谁包着谁——页面的骨架。CSS 管样式：什么颜色、多大字、离多远——页面的皮肤。JS 管行为：当用户做了什么、页面就做什么——页面的神经。三层叠在一起，才是你看到的页面：
三份源码各管一层，叠出同一张页面——从此看任何网页，先问：它的骨架、皮肤、神经各在哪？
| 件 | 管什么 | 长什么样 | 想干这些时动它 |
|---|---|---|---|
| HTML 结构 | 内容与层级：标题、段落、按钮、谁包着谁 | <h1>我的工作室</h1> | 加内容、调章节 |
| CSS 样式 | 观感：颜色、字号、间距、圆角 | h1{color:#2f5fd0} | 换配色、改版式 |
| JS 行为 | 交互：「当……就……」 | btn.addEventListener('click', …) | 加按钮反应、做交互 |
分层立刻带来两样好处。一、排错有方向：内容错了找 HTML，难看找 CSS，点了没反应找 JS——毛病先分层，再动手。二、任务单更好写：上一课你学会给编程智能体交任务单，现在「约束」一栏能写得更准——「只许动 style.css，不许碰 HTML」，验收时一眼就能查它守没守规矩。
泛化换个角度：分层是驯服复杂的通用心法
建筑分承重结构、装修、水电；演出分剧本、舞美、灯光——凡是复杂到一个脑子装不下的东西，人类的老办法都是按职责切层，改哪层动哪层（工程师叫它「关注点分离」）。三件套只是这个心法在网页上的化身。练出这双眼睛，以后面对任何庞然大物——一个 App、一套制度、一篇长文——你都会先问：它分几层？每层管什么？我要改的是哪一层？
例
补充三例——两个常见用法，一个易错。
小晴想把 studio 从蓝色系换成暖黄系。她先用 git 拍了张快照，然后只打开 style.css，改了三行颜色值——HTML 一个字没动，JS 更没碰。刷新，全站换装。要是当初颜色散落在每个标签里，这就是一次「翻遍全部文件」的大工程。分层的红利，在第一次大改时兑现。
同一个研究题，朵朵和小北各交一页。老师不看排版，直接右键看 HTML：朵朵的骨架是三段并列的 <p>，百科词条式罗列；小北的骨架里有一组三格结构——「AI 说 X / 但其实我查到 Y / 因为 Z」，这种带交锋的结构，只有真追问过才长得出来。结构是思考的化石：问得浅，页面就只能罗列；抓到真问题，骨架里就有张力。这个站叫「显影」，正是这个意思——作品把看不见的思考冲洗出来。
大鹏图省事，每写一个标签就顺手糊一段行内样式 style="color:blue;font-size:18px"，全站攒了四十多处。想换配色那天，他挨个文件搜、挨个改，还是漏了七处——页面蓝一块紫一块。错在哪：把样式层的活干进了结构层，「改哪层动哪层」的红利全没了。修法：样式上收进 style.css，一条选择器规则管全站；同理，JS 也别散落在标签里，行为归 script.js。
做
全站三十个标题要从黑色改成蓝色，最省力、最不容易漏的做法是？
studio 文件夹；任务单写明“只许动这些文件”，完成后逐项看 diff。不要把密钥、账号或个人资料放进项目；没有智能体账号时，照着本课步骤手动拆分即可。- 打开 2.1 建的 studio，index.html 里现在结构、样式挤在一起——先 git 拍一张「拆分前」快照。
- 在 assets/ 里新建 style.css 和 script.js；把样式挪进前者，页面里用
<link rel="stylesheet" href="assets/style.css">接上。 - 加一个按钮和一句最简单的 JS（比如点击弹出问候），放进 script.js，用
<script src="assets/script.js"></script>挂在 body 末尾。也可以把这单交给编程智能体——任务单约束写「只许挪动位置，不许改内容」。 - 在项目 HTTP 预览中打开 index.html 验收：页面样子和拆分前一模一样、按钮有反应；再拍一张「拆分完成」快照。
怎么算过关：三个文件各司其职、页面显示与拆分前一致；能不假思索答出「想换配色我动哪个文件、想改标题文字动哪个」。
卡
三件套各管什么？「页面点了没反应」该先查哪一件？
HTML 管结构（骨架）、CSS 管样式（皮肤）、JS 管行为（神经）。点了没反应是行为层的事——先查 JS；难看查 CSS，内容错查 HTML。
- 三件套＝结构、样式、行为：想改哪层、只动哪层，排错先分层。
- 分层让任务单更锋利：「只许动 style.css」——约束写得出，验收才查得了。
- 骨架泄露思考：罗列还是张力，右键源代码一看便知——作品即显影。