语义化 HTML 与可访问性
做一个可用键盘提交的笔记表单，检查标签、焦点、错误提示和标题层级。
课程全目录 · 选择章节
本课学习目标
- • 理解 — HTML 描述内容结构，语义元素让浏览器和辅助技术理解页面。链接用于导航，按钮用于操作；表单字段需要标签，错误需要明确关联。键盘焦点、标题层级和图片替代文本都是基本功能，不是上线后的装饰。
- • 应用 — 登录表单使用 label 与 input，提交按钮有明确文本，错误区使用状态提示。只用鼠标测试看不到焦点丢失，应该用 Tab 完成整次提交。
- • 验证 — 做一个可用键盘提交的笔记表单，检查标签、焦点、错误提示和标题层级。
完成路径
阅读概念与案例 → 完成动手任务 → 勾选实践检查 → 回答检查点 → 保存完成记录。练习由你自行检查，不会假装成自动代码评分。
01 / 核心概念
HTML 描述内容结构，语义元素让浏览器和辅助技术理解页面。链接用于导航，按钮用于操作；表单字段需要标签，错误需要明确关联。键盘焦点、标题层级和图片替代文本都是基本功能，不是上线后的装饰。
登录表单使用 label 与 input，提交按钮有明确文本，错误区使用状态提示。只用鼠标测试看不到焦点丢失，应该用 Tab 完成整次提交。
不要用可点击的 div 代替按钮。加上鼠标事件并不能自动提供键盘操作、焦点样式和辅助技术所需的语义。
02 / 心智模型
理解
HTML 描述内容结构，语义元素让浏览器和辅助技术理解页面。链接用于导航，按钮用于操作；表单字段需要标签，错误需要明确关联。键盘焦点、标题层级和图片替代文本都是基本功能，不是上线后的装饰。
应用
登录表单使用 label 与 input，提交按钮有明确文本，错误区使用状态提示。只用鼠标测试看不到焦点丢失，应该用 Tab 完成整次提交。
验证
做一个可用键盘提交的笔记表单，检查标签、焦点、错误提示和标题层级。
03 / 代码骨架
<label htmlFor="body">Note</label>
<textarea id="body" name="body" required />
<button type="submit">Save</button>这是解释结构的代码骨架，外部函数与数据需要在实际项目中实现。
04 / 贯穿案例
放进真实情境里看
登录表单使用 label 与 input，提交按钮有明确文本，错误区使用状态提示。只用鼠标测试看不到焦点丢失，应该用 Tab 完成整次提交。
- 01
分析边界
HTML 描述内容结构，语义元素让浏览器和辅助技术理解页面。链接用于导航，按钮用于操作；表单字段需要标签，错误需要明确关联。键盘焦点、标题层级和图片替代文本都是基本功能，不是上线后的装饰。
- 02
观察具体过程
登录表单使用 label 与 input，提交按钮有明确文本，错误区使用状态提示。只用鼠标测试看不到焦点丢失，应该用 Tab 完成整次提交。
- 03
验证失败路径
不要用可点击的 div 代替按钮。加上鼠标事件并不能自动提供键盘操作、焦点样式和辅助技术所需的语义。
05 / 动手做
用自己的产物检验理解
做一个可用键盘提交的笔记表单，检查标签、焦点、错误提示和标题层级。
完成时检查
- 提交可阅读的实现或流程图，并注明输入和输出。
- 至少覆盖一个成功案例与一个失败案例。
- 解释本课的边界，写出仍未解决的一项限制。
自动保存在当前浏览器，不会同步到账户。
06 / 检查点