让 HTML、CSS、JavaScript 第一次协作
HTML 描述结构，CSS 描述外观，JavaScript 描述事件发生后应该做什么。先看到结果，再理解三层分工。
- 页面出问题时，能先判断是结构、样式还是行为问题。
- 元素、标签、属性和页面语义
- 制作一张个人介绍卡，添加样式和一个可改变文字的按钮。
- 完成 2.4「服务器、公网 IP、SSH 与 Web 服务」
FOUNDATION
必须理解
HTML 描述结构，CSS 描述外观，JavaScript 描述事件发生后应该做什么。先看到结果，再理解三层分工。
HTML、CSS、JavaScript 是浏览器原生理解的三种核心语言。框架会改变组织方式，却不会取消结构、样式和行为的分工；理解三者能让你在页面出错时先找到责任层。
把网页想成一间房：HTML 是墙体、门窗和家具的结构，CSS 是颜色、尺寸与摆放，JavaScript 是开关、门锁和按下按钮后的动作。
任务应用用 HTML 描述输入框与任务列表，用 CSS 安排间距和状态，用 JavaScript 在点击“添加”后读取输入并插入一条任务。
元素、标签、属性和页面语义
HTML（超文本标记语言）负责告诉浏览器“这里是标题、这里是输入框、这里是按钮”。元素选得合适，键盘和辅助工具也更容易明白页面结构。
基础概念
HTML（HyperText Markup Language，超文本标记语言）用元素描述内容的结构和语义。标签写出元素类型，属性补充名称、关联或行为信息，语义让浏览器和辅助技术理解内容角色。
进一步理解
标题、段落、列表、按钮和输入框不是只为了默认样式，它们自带不同含义和交互规则。使用正确元素，键盘操作、搜索理解和维护都会更可靠。
开始标签、内容和结束标签组成常见元素；`id`、`href`、`type` 等属性提供额外信息。属性是否有效取决于元素和规范。
任务输入使用带 `for` 的 label 关联 input，提交动作用 button，任务集合用 list；读者即使关闭样式也能理解结构。
用 div 加点击事件可以做出像按钮的外观，却不会自动获得按钮的键盘与语义行为；视觉相似不代表结构等价。
这一小节记住：HTML 首先描述内容是什么，外观和复杂行为交给其他层。
选择器、盒模型、布局和响应式样式
CSS（层叠样式表）先用选择器找到元素，再决定颜色、间距和摆放方式。你看到一个盒子总比预期宽，通常要回头看内容、内边距、边框和外边距这四层。
基础概念
CSS（Cascading Style Sheets，层叠样式表）用选择器找到元素，再通过声明设置外观与布局。盒模型把元素看成内容、内边距、边框和外边距四层。
进一步理解
层叠意味着多条规则可能同时命中，来源、选择器权重和书写顺序共同决定最终值。浏览器开发者工具中的 Computed 面板能看到实际生效结果。
响应式不是把桌面页面等比例缩小，而是在空间变化时重新安排内容优先级、列数、字号和触摸目标。Flexbox 与 Grid 是常见布局工具。
桌面上任务表单与列表可以两列排列，窄屏改为一列；按钮保持足够触摸面积，文本允许换行而不是横向溢出。
盒模型解释尺寸，布局系统解释多个元素怎样排列；`width: 100%` 仍可能因内边距和边框超宽，不能把两类问题混为一谈。
这一小节记住：先确认选中了谁，再看盒模型和布局规则怎样共同产生画面。
事件、变量、函数与 DOM 更新的最低直觉
JavaScript 让页面真的动起来。按钮被点击是事件，输入框内容可以放进变量，函数组织接下来的动作，DOM 则是脚本读写页面的那座桥。
基础概念
JavaScript 是在网页中处理数据和行为的编程语言。事件表示用户或浏览器发生了什么，变量保存当前值，函数组织动作，DOM（Document Object Model，文档对象模型）提供读写页面结构的接口。
进一步理解
脚本先找到目标元素，再监听事件；事件发生时读取输入、校验数据、更新数组，最后修改 DOM 让画面反映新结果。每一步都能单独观察。
DOM 是浏览器根据 HTML 建立的对象结构，不是 HTML 文件本身。修改 DOM 会改变当前页面，但如果没有持久化，刷新后仍会回到原始数据。
点击“添加任务”后，监听函数读取输入框，创建任务对象，把新 li 放进列表，并清空输入框；空标题则显示提示。
变量变化不会自动让原生页面更新，必须显式修改 DOM；React 等框架才会根据状态重新计算界面。
这一小节记住：事件触发函数，函数改变数据，再让页面反映数据。
- 把代码放进扩展名为 .html 的文件，并用浏览器打开。
- 这段代码只建立结构；暂时没有 CSS 外观和 JavaScript 点击行为。
<label for="task-title">任务标题</label>
<input id="task-title" />
<button id="add-task" type="button">添加任务</button>
<ul id="task-list"></ul>这段 HTML 只描述页面有哪些内容；样式与点击后的动作分别放到 CSS 和 JavaScript 中。
- label 通过 for 与输入框 id 关联，点击文字也能聚焦输入框。
- button 明确声明 type=button，避免放进表单后意外触发提交。
- 空的 ul 是未来任务项的容器，JavaScript 会在运行时向其中加入 li。
页面会出现标签、输入框、按钮和一个暂时为空的列表；按 Tab 可以依次聚焦输入框与按钮，但点击按钮还不会新增任务。
AI COLLABORATION
AI 如何参与
让 AI 只修改一层：改结构时不碰逻辑，改样式时不重写页面，改交互时说明事件与目标元素。
推荐协作顺序
- 1
先把页面要出现的内容说清楚，让 AI 只写 HTML 结构。
- 2
结构能看懂后再补 CSS，最后才加按钮交互。
- 3
每加一层就刷新页面，看看变化是否和这层职责一致。
请为零基础学生生成一个最小“学习任务卡”示例，只包含：标题输入框、添加按钮、任务列表。请把 HTML、CSS、JavaScript 分成三个代码块，并在每段代码前说明它负责结构、样式还是行为。JavaScript 只实现添加任务，不使用框架。
三个职责清晰、可以直接连接的最小文件；按钮必须有可理解文字，输入为空时应给出反馈。
人工检查清单
- 确认 AI 没把所有代码塞进 HTML，也没有用 div 代替原生按钮或忽略输入标签。
- 要求 AI 标出每段代码属于结构、样式还是行为，并解释跨层连接点。
- 在浏览器中分别禁用 CSS 和 JavaScript，观察结构是否仍可理解、交互是否按预期失效。
COMMON TRAPS
常见误区
错误不是需要隐藏的失败，而是帮助你看清系统边界的证据。下面三类问题在 AI 辅助学习中最常出现。
一上来就让 AI 生成整页
- 你会看到
- 得到几百行混在一起的代码，想改按钮文字都找不到位置。
- 为什么发生
- 整页复制能快速得到画面，却跳过了元素、选择器与事件之间的对应关系，一个小问题就无法定位。
- 怎样纠正
- 按结构、样式、行为分三次完成，每次只处理一种问题。
把所有东西都写成 div
- 你会看到
- 页面看起来正常，但键盘操作和屏幕阅读器无法理解按钮、列表和表单。
- 为什么发生
- 用 div 模拟所有元素看似自由，却丢失浏览器原生语义、键盘行为和表单能力。
- 怎样纠正
- 能用 button、label、ul 等原生元素时优先使用它们。
按钮有样子却没有动作
- 你会看到
- CSS 把元素画成按钮，但 JavaScript 没绑定事件或找错了元素。
- 为什么发生
- 同时修改三层会让结果变化无法归因，即使修好了也不知道哪一处真正起作用。
- 怎样纠正
- 先确认元素 id，再在控制台验证点击事件是否真的触发。
HANDS-ON
动手任务
制作一张个人介绍卡，添加样式和一个可改变文字的按钮。
- 完成 2.4「服务器、公网 IP、SSH 与 Web 服务」
跟着做
- 01
创建 index.html，并加入标题、label、input、button 和 ul。
- 02
创建 style.css，为容器、输入区和任务项添加最小样式。
- 03
创建 script.js，监听按钮点击并读取输入值。
- 04
创建 li 加入列表，并在成功后清空输入框。
- 05
测试正常标题与空标题，给空标题添加可理解提示。
页面出问题时，能先判断是结构、样式还是行为问题。
给任务项增加完成按钮，并只通过 CSS 类名改变完成状态。
离开本课前，自问四件事
- HTML、CSS 和 JavaScript 分别回答页面的哪类问题？
- 为什么语义正确的 button 比带点击事件的 div 更可靠？
- 盒模型的四层是什么，响应式布局又解决什么？
- 点击添加任务后，事件、数据与 DOM 按什么顺序变化？
确认完成后，会同步更新学习中心的课程学习进度。