看懂网页的三层

01 · 用房子理解三层

HTML 是房间与门的结构，CSS 是颜色、尺寸和摆放，JavaScript 是开关和动作。修改标题文字属于 HTML；修改字号属于 CSS；点击后展开属于 JavaScript。

这不是严格的计算机定义，却足以帮助你给 Agent 下达准确任务。

<h2>HTML：结构</h2>          <!-- 内容与语义 -->
<style>h2 { color: #194b3a; }</style>  <!-- 呈现 -->
<button id="more">展开</button>       <!-- 可操作元素 -->
<script>more.onclick = () => { /* 行为 */ }</script>

02 · 让 Agent 先解释再动手

直接让 Agent 修改陌生代码容易产生连锁变化。先要求它指出三层分别在哪里，再开始写。

请在 03-web-layers 中创建 web-anatomy.html，做一页“网页解剖图”。

页面包含 HTML、CSS、JavaScript 三个章节，每章有一句职责说明和一个真实小例子。加入一个“展开全部说明”按钮，点击后显示每章的补充说明，再次点击可收起。

要求：使用语义化 main、section、h1、h2；CSS 集中写在 style 中；行为集中写在 script 中；按钮文字和 aria-expanded 随状态变化；不用框架与外部资源。

写代码前，先用三句话说明你准备如何划分结构层、呈现层和行为层。

03 · 做三次单层修改

每次只碰一层，观察变化范围。这样你会开始建立“修改请求—文件位置—页面结果”的映射。

1. 结构层：把三个 section 放进一个 main，并检查标题层级。
2. 呈现层：只在 style 中调整章节间距，不改 HTML 文案。
3. 行为层：让按钮支持 Enter 与 Space，并同步 aria-expanded。
4. 每次修改后刷新页面，确认另外两层没有意外变化。

请审查 web-anatomy.html，不要立即改代码。按 HTML、CSS、JavaScript 三部分列出：对应代码位置、当前职责、一个风险。然后只修复你找到的可访问性问题。

04 · 用浏览器验证行为

鼠标能点不等于按钮可用。用 Tab 聚焦按钮，按 Enter 展开，检查按钮文字、状态属性和内容显示是否同步。关闭 JavaScript 后，基础说明仍应可读。

1. 按 Tab 到按钮，确认焦点明显。
2. 按 Enter 展开，再按 Space 收起。
3. 检查页面只有一个 h1，三个章节都用 h2。
4. 在文件中找到事件监听代码，并用自己的话解释它。