HTML 学习路线 MOC
从零基础到可独立交付语义化、可访问、可表单交互的 HTML 结构能力：五阶段、依赖关系、逐篇目录与完成标准。
#type / moc
#type / synthesis
#status / growing
#tech / dev
#tech / dev / frontend
#resource / html
[!info] related notes
- 所属总入口：HTML MOC
- 对象介绍：HTML
- 阶段地图：HTML 文档与语义 MOC · HTML 表单与媒体 MOC · HTML 可访问性 MOC
- 相邻：CSS 学习路线 · JavaScript 学习路线 · 前端基础 MOC
HTML 学习路线 MOC
这个概念为什么出现
把 HTML 当成“标签背诵表”会制造假进度：会写 div 墙却不懂文档大纲，会塞 ARIA 却破坏原生语义，会画表单却不会校验与可访问提交。本路线把「从零到可交付页面结构」拆成五个阶段。
[!abstract] 路线结论 先建立“文档与语义大纲”的心智，再学链接/媒体/表格等内容模型，随后进入表单与交互控件；可访问性不是附录，应与语义同步学，最后把脚本加载、SEO 元信息与工程结构接上 CSS/JS。
整条路线围绕五个问题：
- 为什么语义标签优先于无意义容器
- 内容模型与嵌套规则如何约束结构
- 表单如何同时服务用户、浏览器校验与服务端
- ARIA 何时补充、何时不该覆盖原生语义
- 脚本与资源如何进入文档而不破坏解析与性能
如何使用这份路线
| 场景 | 做法 |
|---|---|
| 从零开始 | 按阶段顺序读；每篇用浏览器验证结构与可访问性树 |
| 已有前端经验 | 可加速标签列表，但不要跳过语义、表单与 a11y |
| 只抓主干 | 看文末主干主题与 0 到 1 完成标准 |
难度标记
- L1 入门 · L2 基础巩固 · L3 核心心智 · L4 工程/可访问
依赖关系总图
flowchart TD
S1["阶段一 文档与语义"] --> S2["阶段二 内容与媒体"]
S2 --> S3["阶段三 表单与控件"]
S1 --> S4["阶段四 可访问性"]
S3 --> S4
S4 --> S5["阶段五 工程与协作"]
S2 --> S5阶段与子 MOC 对照
| 阶段 | 目标 | 主要子 MOC |
|---|---|---|
| 一 | 文档骨架、语义分区、大纲 | HTML 文档与语义 MOC |
| 二 | 链接、图片、多媒体、表格 | HTML 文档与语义 MOC · HTML 表单与媒体 MOC |
| 三 | 表单控件、校验、提交 | HTML 表单与媒体 MOC |
| 四 | 可访问性与 ARIA 边界 | HTML 可访问性 MOC |
| 五 | 脚本加载、元信息、与 CSS/JS 协作 | HTML MOC · 前端基础 MOC |
阶段一：文档与语义
目标：能写出合法文档骨架，并用语义分区表达页面大纲。
完成标准：
- 能手写最小 HTML5 文档并在浏览器打开
- 能用
header/nav/main/article/section/footer表达结构 - 能说明为何不要只用
div堆页面
| 序号 | 笔记 | 核心问题 | 难度 | 源码 |
|---|---|---|---|---|
| 1.1 | HTML | HTML 是什么、边界在哪 | L1 | 否 |
| 1.2 | HTML 文档结构 | doctype、html/head/body 如何协作 | L1 | 否 |
| 1.3 | HTML 语义化元素 | 语义标签解决什么 | L2 | 否 |
| 1.4 | HTML 内容模型 | 哪些元素能嵌套哪些 | L3 | 建议 |
| 1.5 | HTML 基础知识完全指南 | 初学者系统入口（综合） | L1 | 否 |
阶段二：内容、链接与媒体
目标：能正确表达链接、图片、多媒体与表格数据。
完成标准：
- 能区分
src与href的语义 - 能为图片提供有意义的
alt - 能用表格表达二维数据而不是布局
| 序号 | 笔记 | 核心问题 | 难度 | 源码 |
|---|---|---|---|---|
| 2.1 | src 与 href | 资源引用与超链接差异 | L1 | 否 |
| 2.2 | HTML 图片与媒体 | img/picture/video/audio 边界 | L2 | 否 |
| 2.3 | HTML 表格 | 表格结构与可访问表头 | L2 | 否 |
| 2.4 | HTML 零散技巧 | 常见陷阱与技巧 | L2 | 否 |
| 2.5 | SVG 使用 | 矢量图如何嵌入 | L2 | 否 |
阶段三：表单与控件
目标：能构建可提交、可校验、可标注的表单。
完成标准：
- 能用
label正确关联控件 - 能使用原生校验属性并理解局限
- 知道何时需要 JS 增强而不破坏无 JS 可用性
| 序号 | 笔记 | 核心问题 | 难度 | 源码 |
|---|---|---|---|---|
| 3.1 | HTML 表单 | form 如何组织提交 | L2 | 否 |
| 3.2 | 表单控件与校验 | input 类型与原生校验 | L3 | 否 |
| 3.3 | CSS 表单样式 | 控件样式边界（协作） | L2 | 否 |
| 3.4 | 前端表单提交状态 | 提交中/成功/失败状态 | L3 | 否 |
阶段四：可访问性
目标：让结构对键盘与辅助技术可用。
完成标准：
- 能解释“优先原生语义，再补 ARIA”
- 能给图标按钮提供可访问名
- 能用无障碍树检查基础问题
| 序号 | 笔记 | 核心问题 | 难度 | 源码 |
|---|---|---|---|---|
| 4.1 | HTML 可访问性基础 | a11y 主线是什么 | L3 | 建议 |
| 4.2 | ARIA | ARIA 何时用、何时不用 | L3 | 建议 |
| 4.3 | 语义化元素 | 原生语义优先 | L2 | 否 |
阶段五：工程与协作
目标：把 HTML 接到脚本、样式与构建流程。
完成标准：
- 能说明
script位置与defer/async差异 - 能配置基础 meta 与 SEO/社交标签意识
- 知道 HTML 如何与 CSS/JS 路线衔接
| 序号 | 笔记 | 核心问题 | 难度 | 源码 |
|---|---|---|---|---|
| 5.1 | HTML 中的 JS 脚本 | 脚本如何加载 | L2 | 否 |
| 5.2 | HTML 元信息与 SEO 基础 | head 元数据职责 | L2 | 否 |
| 5.3 | CSS 学习路线 | 样式主线 | L2 | 否 |
| 5.4 | JavaScript 学习路线 | 行为主线 | L2 | 否 |
| 5.5 | 前端基础 MOC | 综合入口 | L1 | 否 |
如果只抓主干，优先这 6 个主题
0 到 1 的完成标准
- 能写语义化着陆页结构，而不是纯 div
- 能完成带 label 与原生校验的表单
- 能解释 ARIA 不替代原生语义
- 能正确放置脚本并理解 defer
- 能在无障碍树中找到标题与地标
认知跳跃提醒
- 未理解语义就堆 ARIA → 先 1.3 / 4.1
- 未理解表单就上复杂组件库 → 先 3.1 / 3.2
- 未理解文档结构就谈 SEO → 先 1.2 / 5.2
相关入口
自测题
- 为什么可访问性不是最后一章选修？
div + role=button与<button>的优先顺序？
答案
- 语义与控件设计从一开始就决定键盘与辅助技术体验，事后补洞成本更高。
- 优先原生
<button>；只有无法使用原生元素时才用 ARIA 修补。