HTML：搭出有语义的页面结构
HTML 先把页面内容的身份和顺序写清楚。任务标题、输入框、提交按钮和任务列表各有合适的元素，暂时不处理颜色与交互。
- 只看 HTML 也能读出任务页面的内容层级，输入框有标签，提交动作有明确按钮。
- 元素、标签、属性和文本内容
- 完成HTML：搭出有语义的页面结构后，应当只看 HTML 也能读出任务页面的内容层级，输入框有标签，提交动作有明确按钮，并保留页面结构、不同宽度截图、控制台和元素状态作为可重复检查的依据。
- 完成 2.4「服务器、公网 IP、SSH 与 Web 服务」
FOUNDATION
必须理解
浏览器先读取 HTML，才知道页面上有哪些内容。结构写得清楚，后面的样式、脚本、搜索和键盘操作才有可靠的落点。
本课依次讲清元素、标签、属性和文本内容、标题、表单、列表等语义结构和缩进、嵌套与浏览器开发者工具，最后通过“在浏览器中只用键盘移动焦点，再到元素面板核对嵌套”检查学习结果。
HTML 像一份带层级的物品清单。它会说明哪一行是总标题，哪一块是表单，哪些内容属于同一个列表。它暂时不管颜色，也不处理点击。
任务应用先放入页面标题、任务输入框、提交按钮、筛选区和任务列表。即使没有 CSS，这些内容也应该按合理顺序出现。
元素、标签、属性和文本内容
标签告诉浏览器内容的角色。h1 是主标题，button 是可操作按钮，ul 和 li 表示一组列表项。它们并不只是换一种外观。
基础概念
HTML（HyperText Markup Language，超文本标记语言）用元素描述页面内容。标签写明元素类型，元素中的文字或子元素组成确实展示的内容。
进一步理解
多数元素由开始标签、内容和结束标签组成。浏览器会把它们解析成有层级的结构，所以谁包含谁会影响阅读顺序和后续选择。
有些元素负责文字内容，有些元素负责交互或分组。选元素时先问这块内容是什么，再考虑它默认长什么样。
任务应用用 h1 表示页面主标题，用 form 包住输入流程，用 ul 和 li 表示任务集合。没有样式时，这层关系仍然存在。
标签名和页面文字不是一回事。button 是元素类型，添加任务是用户看到的文字，两者共同构成一个可理解的操作。
这一小节记住：写 HTML 时先确认内容角色和层级，不用它解决颜色与位置。
标题、表单、列表等语义结构
元素可以包含文字，也可以包含别的元素。缩进不会改变浏览器结果，却能让你看清谁包着谁，少写一个结束标签时也更容易发现。
基础概念
语义指内容在页面中的角色。浏览器、键盘用户和辅助技术会利用元素自带的语义，理解这里是标题、导航、表单还是按钮。
进一步理解
标题要按内容层级使用，不能只因为字号合适就随便选择。列表表达一组同类项目，表单把一组输入和提交动作联系在一起。
原生按钮已经具备获得焦点和键盘触发等行为。用普通容器模仿按钮时，这些能力不会凭外观自动出现。
任务标题输入框前放置可见 label，提交使用 button，任务放进列表。只按 Tab 键也能走到输入框和操作按钮。
语义清楚不等于页面已经好看。HTML 负责把角色写对，CSS 才负责调整外观，两项检查要分开进行。
这一小节记住：能用原生元素准确表达时，先使用原生元素。
缩进、嵌套与浏览器开发者工具
属性补充元素需要的信息。label 的 for 和 input 的 id 对上以后，点击文字也能把焦点交给输入框。开发者工具可以直接检查浏览器最后理解出的结构。
基础概念
属性是写在开始标签里的补充信息。它可以标识元素、连接两个元素，或者告诉浏览器这个元素应采用哪一种行为。
进一步理解
`id` 应在当前页面中保持唯一，脚本和标签关联都可能依赖它。`type` 会影响按钮或输入框行为，不能只看名称猜结果。
元素必须按允许的关系嵌套。浏览器会尝试修补不完整的 HTML，但修补后的 DOM 可能和源码缩进显示的层级不同。
label 的 for 写 task-title，input 的 id 也写 task-title。点击标签文字后输入框获得焦点，这就是可直接观察的关联结果。
class 常用于给一组元素分类，id 用来唯一标识一个元素。两者都能被 CSS 或脚本使用，职责却不完全相同。
这一小节记住：属性要服务于明确的关联或行为，写完后用浏览器验证。
- 把代码放进扩展名为 .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：搭出有语义的页面结构示例时，这里写的是页面内容和关系。颜色、间距与点击后的处理会在后续课程中加入。
- label 通过 for 与输入框 id 关联，点击文字也能聚焦输入框。
- button 明确声明 type=button，避免放进表单后意外触发提交。
- 空的 ul 是未来任务项的容器，JavaScript 会在运行时向其中加入 li。
页面会出现标签、输入框、按钮和一个暂时为空的列表；按 Tab 可以依次聚焦输入框与按钮，但点击按钮还不会新增任务。
AI COLLABORATION
AI 如何参与
在HTML：搭出有语义的页面结构这一课，AI 负责根据真实材料解释元素、标签、属性和文本内容并指出遗漏，学习者负责控制范围、执行修改和核对页面结构、不同宽度截图、控制台和元素状态。
推荐协作顺序
- 1
先用普通文字列出页面内容和顺序。
- 2
让 AI 把内容对应到合适的 HTML 元素，并说明选择原因。
- 3
在浏览器打开文件，用元素面板和键盘逐项检查。
下面是任务页面草图。请只规划 HTML 结构，列出每块内容适合使用的语义元素及理由。不要生成 CSS 或 JavaScript。输出后附一份人工检查清单，重点检查标题层级、表单标签、按钮类型和列表关系。
一份不用样式也能读懂的页面结构。输入框有对应标签，按钮使用原生 button，任务使用实际的列表表达；HTML：搭出有语义的页面结构的人工验收必须回到真实页面、请求、终端、测试或数据结果，不能用 AI 的文字说明代替。
人工检查清单
- 逐项核对页面草图中的内容是否都出现，再检查标签与输入框的对应关系，不能因为浏览器能显示就忽略结构错误。
- 要求 AI 为每个主要元素说明内容角色，不能只说这样写比较常见。
- 关闭样式后按页面顺序阅读，并只用键盘走过输入框和按钮，核对真实结构。
COMMON TRAPS
常见误区
下面三类问题会让任务看似完成，却经不起刷新、错误输入或真实环境检查。先看现象，再找原因和修正方法。
用 div 代替所有元素
- 你会看到
- 页面看起来相似，但表单和列表关系无法从结构中读出
- 为什么发生
- div 本身不说明内容角色，浏览器和辅助技术无法据此识别标题、按钮或导航。
- 怎样纠正
- 先选能表达角色的元素，再考虑样式
输入框没有可见标签
- 你会看到
- 用户只能靠占位提示猜测应该填写什么
- 为什么发生
- 占位提示会在输入后消失，也不能稳定替代输入项的名称。
- 怎样纠正
- 使用 label 明确说明输入用途并建立关联
为了排版改变标题顺序
- 你会看到
- 小标题直接跳到很深的级别，只因默认字号合适
- 为什么发生
- 标题级别表达文档层次，拿它控制字号会让内容结构断裂。
- 怎样纠正
- 按内容层级选标题，字号交给 CSS
HANDS-ON
动手任务
只看 HTML 也能读出任务页面的内容层级，输入框有标签，提交动作有明确按钮。
- 完成 2.4「服务器、公网 IP、SSH 与 Web 服务」
跟着做
- 01
创建 index.html，并写入文档基础结构。
- 02
按页面顺序加入主标题、说明文字和任务表单。
- 03
为输入框补上可见标签，并确认 for 与 id 一致。
- 04
加入筛选按钮、空状态和空的任务列表。
- 05
在浏览器中只用键盘移动焦点，再到元素面板核对嵌套。
只看 HTML 也能读出任务页面的内容层级，输入框有标签，提交动作有明确按钮。
为每条任务设计合适的列表项结构，包含标题、状态文字和操作按钮，但先不要写样式与交互。
离开本课前，自问四件事
- 我能否只看 HTML 说出页面内容的阅读顺序？
- 为什么任务列表适合使用 ul 和 li，而不是一串没有关系的 div？
- label 的 for 与 input 的 id 怎样配合？
- 页面能显示时，为什么仍要到元素面板检查嵌套？
确认完成后，会同步更新学习中心的课程学习进度。