EXPLORE / HTML
HTML 系统教程
读懂原理，动手实践，每次前进一小步。
01—03 · 文档与内容
建立文档、链接、路径和图片的正确模型。
04—06 · 语义与数据
完成表单、页面地标和可读的数据表格。
07—08 · 媒体与发布
处理媒体回退、元信息与发布检查。
09—14 · 完整页面专题
深入图片资源、表单提交、对话框、模板与页面验收。
建议学习方式：先阅读机制，再运行示例；完成练习后展开参考答案。每章都有验证步骤与常见边界。
01 · 文档、DOM 与第一个网页
独立建立 HTML 文件，区分源代码、浏览器生成的 DOM 和最终页面，找到改动没有生效的原因。
02 · 标题层级、语义与链接
按信息层次选择标签，区分跳转链接与操作按钮，并写出可独立理解的链接文字。
03 · 路径、图片与替代文本
从当前文档位置推导相对路径，减少图片加载后的布局跳动，并按用途写替代文本。
04 · 表单语义、提交与校验
解释 label、id、name 的不同作用，区分输入校验与可信数据，并观察表单提交的数据格式。
05 · 页面分区与无障碍结构
用 header、nav、main、article、section 和 footer 划分页面，并用键盘验证主要内容可达。
06 · 数据表格与表头关系
建立带标题、行表头和列表头的数据表，判断什么时候应使用表格而不是卡片。
07 · 音视频、嵌入与渐进增强
配置可控制的视频，理解字幕文件和资源格式，并在功能缺失时保留基本信息。
08 · 元信息、资源加载与发布检查
配置语言、标题、编码和视口，区分 HTML 源码错误与资源请求错误，并完成一次有证据的发布检查。
09 · 字符编码、实体与代码展示
分清文件编码、HTML解析和页面显示，修复乱码并安全展示代码。
10 · 响应式图片：srcset、sizes与资源选择
区分分辨率选择与构图切换，说明浏览器为什么下载某张图片。
11 · 表单数据、约束验证与提交方式
跟踪一次提交如何从控件变成数据，并分清原生验证、业务规则与网络请求。
12 · 原生对话框：打开、取消与焦点返回
使用dialog完成明确的确认流程，理解模态状态与普通可见状态的区别。
13 · template、data属性与重复内容
把重复卡片结构与数据分离，避免动态渲染时产生重复id或HTML注入。
14 · 页面验收：键盘、名称与错误路径
用可重复的检查流程发现仅靠截图无法发现的可用性问题。