Web 平台与界面基础

从文档结构、样式布局、浏览器输入到网络和可访问性，建立所有 UI 框架都依赖的平台心智模型。

阅读起点

学习前先阅读：HTML & CSS 学习路线。

全书顺序

本书按知识依赖组织。主线先建立可运行的共同模型，再进入机制、工程边界和生产约束；维护与前沿内容明确标注，不改变主线的学习顺序。

第1章｜HTML 语义与文档结构

能用语义元素表达内容层级、表单和可访问关系。

1. 语义元素与文档树：理解结构、元数据、链接、表单和语义选择。
2. 表单与约束验证：把输入类型、约束、提交和错误反馈组织成可用流程。
3. 可访问名称与结构：让结构同时服务浏览器、辅助技术和测试。

第2章｜CSS 层叠、盒模型与布局

能解释样式为何生效并选择适合的布局模型。

1. 选择器与层叠：掌握来源、层叠层、继承和特异性。
2. 盒模型与格式化上下文：用尺寸、外边距、BFC 处理真实布局边界。
3. Flex Grid 与响应式：根据一维、二维和容器约束选择布局。
4. 传统布局维护：读懂 float、定位和旧浏览器兼容代码。

第3章｜浏览器运行时与输入

能把 DOM、事件、网络、存储和渲染放入同一条运行链。

1. DOM 与事件传播：理解查询、变更、捕获冒泡、默认行为和委托。
2. Fetch、取消与流式响应：处理请求契约、超时、取消、流和重试。
3. 存储与离线数据：区分 Cookie、Storage、IndexedDB、Cache API 的边界。
4. 渲染管线与性能测量：从样式计算、布局、绘制到合成定位性能问题。

第4章｜可访问性与兼容质量

能将键盘、焦点、动态反馈和兼容测试纳入交付。

1. 键盘焦点与交互状态：设计可操作、可感知且可恢复的键盘路径。
2. 动态内容与错误反馈：用 live region、焦点和错误关联表达状态变化。
3. 响应式与 PWA 生命周期：组织断网、安装、缓存和同步的用户承诺。
4. 特性检测与平台测试：使用能力检测和浏览器矩阵管理兼容边界。

第5章｜Web Components 与互操作

能用平台组件封装能力，并判断何时跨框架共享自定义元素。

1. 自定义元素生命周期：理解注册、升级、连接和销毁。
2. Shadow DOM 与样式封装：处理 shadow tree、slot、主题和可访问性。
3. 表单关联与事件契约：让自定义元素参与表单并稳定传递事件。
4. 框架互操作与发布：定义版本、测试和在 Vue/React 中的使用边界。

阅读边界

本页是学习路线和专题入口，不替代专题笔记中的机制解释、可运行示例和练习。笔记尚未完成的专题会先显示为占位页；已有经验的读者可以跳到具体章节，再按前置关系回补。

路线状态

本路线的目录已完成本轮架构审查；专题笔记的内容质量和来源审查另行进行。