# 本章精读 · 第 3 课（Web 前端与人机协同）

## 本章定位与前情提要

前两章覆盖了 AI 叙事与生成工作流；本章进入「如何把协作产物落到可读、可维护、可迭代的前端载体」。你可以把本章理解为：**语义化 HTML + CSS 布局心智 + JavaScript 交互最小闭环**，并用提示模板让人类审美与模型产出对齐。

这与期末考试的关系：**不要求背完整框架文档**，但要理解常见概念的层级（DOM、样式分层、脚本事件循环直觉）。

### 最小术语表

- **HTML**：结构化语义标签承载内容与无障碍含义。
- **CSS**：排版、配色、响应式与媒介查询。
- **JavaScript**：浏览器端交互脚本（DOM 更新、事件回调）。
- **响应式**：同一站点在不同屏幕宽度下的可读布局策略。
- **可访问性（a11y）**：键盘可达、焦点可见、语义角色——与本项目 UI 规则一致。
- **模块化**：拆分组件／函数以减少耦合，便于人机交替迭代。

---

## 第一节 · 语义化页面骨架为什么重要

直觉：**div 堆砌**能快速出原型，但提示词协作时代更需要清晰的结构化锚点——便于模型定位区块（导航／主体／脚注）。无障碍叙事与之同源：标题层级不乱跳，表单控件有关联标签。

---

## 第二节 · CSS：布局优先级心智（Flex / Grid）

不必死记每一种属性名，但要记住选择题语境：

- **一维排版松紧**：Flex 常被联想到单行／单列主轴分配。
- **二维棋盘**：Grid 适合栏目与栅格分区。
- **移动优先**：先窄屏可读，再渐进增强。

---

## 第三节 · JavaScript：事件驱动的直觉

脚本监听点击／输入事件 → 更新 DOM 状态 →（可选）异步请求后端 API。别把「异步」误解成「并行万能」：**并发语义与回调陷阱**常在辨析叙述中出现。

---

## 第四节 · 人机协同写作模板（可复制）

把一个界面需求写成模型友好的结构块：

1. **受众与情境**：课堂演示／移动端单手操作／深色主题。
2. **布局意图**：主导航置顶固定；正文单列最大宽度。
3. **禁忌**：禁用不可缩放 viewport；禁用阻止粘贴。
4. **交付**：给出组件边界草图文字描述而非笼统「好看」。

---

## 与本章测验怎么对齐

题干若落在「版权」「素材替换链路」，回看第 2 课流水线；若是「无障碍」「键盘」，对齐本节语义化叙事。

---

## 延伸阅读

全课程纲要 **`topic-8`** 与本章精读互为压缩版索引。