110. 学习路线与下一步

六大模块回顾

本教程带你走完了 110 章，涵盖 6 个模块：

模块九：多媒体（75-80 章）

你学到了：

• <audio> 和 <video> 标签的用法和属性
• <source> 提供多格式兼容
• <track> 添加字幕
• <iframe> 嵌入外部内容和安全配置
• <embed> 和 <object> 的历史角色

模块十：Canvas 与 SVG（81-86 章）

你学到了：

• Canvas 2D 绘图 API：路径、形状、文本、样式
• Canvas 变换：平移、旋转、缩放、合成
• SVG 矢量图形：基础形状、路径语法、内联 SVG
• Canvas 和 SVG 的区别和选型

模块十一：Web 存储与离线（87-91 章）

你学到了：

• localStorage 持久键值存储
• sessionStorage 会话级存储
• storage 事件和跨标签页通信
• IndexedDB 客户端数据库
• AppCache 已废弃、Web SQL 已废弃、Service Worker 是现代方案

模块十二：Web API 与通信（92-99 章）

你学到了：

• 拖放 API 实现拖拽交互
• Geolocation 获取地理位置
• Web Workers 后台线程
• WebSocket 和 SSE 实时通信
• History API 和前端路由原理
• Web Components 自定义元素
• File API、Clipboard API、Intersection Observer 等实用工具

模块十三：全局属性、事件与最佳实践（100-106 章）

你学到了：

• 全局属性清单和用法
• data-* 自定义数据属性
• 事件模型和事件委托
• 鼠标、键盘、表单、窗口事件
• 废弃标签清单和替代方案

模块十四：规范与速查（107-110 章）

你学到了：

• HTML5 是历史名词，现行是 Living Standard
• HTML5 新特性全景速览
• 语义化标签速查手册

下一步学什么

HTML5 只是前端三剑客之一。继续深入的方向：

1. CSS 深入

学完 HTML5 后，很多”好看的效果”要靠 CSS：

• Flexbox：弹性布局，解决大部分排列问题
• Grid：网格布局，二维布局的终极方案
• 响应式设计：媒体查询、移动优先、弹性单位
• CSS 变量：--primary-color: blue
• 动画与过渡：transition、@keyframes
• 现代 CSS：:has() 选择器、容器查询、层叠层

推荐资源：CSS-Tricks、MDN CSS

2. JavaScript 进阶

HTML 是骨架，JS 是灵魂：

• ES6+：let/const、箭头函数、解构、Promise、async/await
• DOM 操作：选择、创建、修改、删除节点
• 异步编程：回调、Promise、async/await
• 模块化：ES Modules、import/export
• 错误处理：try/catch、错误类型

推荐资源：JavaScript.info、MDN JavaScript

3. 前端框架

实际项目几乎都用框架：

框架	特点	适合
Vue	渐进式、模板语法、上手快	中小型项目、国内流行
React	组件化、JSX、生态丰富	大型应用、跨平台
Angular	完整框架、TypeScript	企业级应用

先精通一个框架，再触类旁通。

4. 工程化工具

现代前端离不开工具链：

• 包管理器：npm、yarn、pnpm
• 构建工具：Vite（快）、Webpack（老牌）
• 版本控制：Git
• 代码质量：ESLint、Prettier
• TypeScript：给 JS 加类型系统

5. 推荐学习路径

HTML5 基础 ✓（本教程已完成）
    ↓
CSS 基础 + Flexbox/Grid
    ↓
JavaScript 基础 + ES6+
    ↓
Git 基础
    ↓
选一个框架（Vue 或 React）
    ↓
Vite 构建工具
    ↓
实战项目

推荐资源汇总

文档类

资源	用途
MDN Web Docs	最权威的中文 Web 文档
WHATWG HTML Spec	HTML 官方规范（英文）
Can I use	查浏览器兼容性
W3C Validator	HTML 语法校验

教程类

资源	特点
JavaScript.info	现代 JS 教程
web.dev	Google 的 Web 最佳实践
CSS-Tricks	CSS 技巧和深度文章
freeCodeCamp	免费编程学习平台

实践类

资源	特点
CodePen	在线代码演示和分享
JSFiddle	在线代码测试
Frontend Mentor	前端实战项目练习
GitHub	代码托管、开源学习

社区类

资源	特点
掘金	中文前端社区
Stack Overflow	编程问答
知乎	技术讨论

最后的话

HTML5 是 Web 开发的基石。你现在有了完整的知识体系，接下来的关键是动手做项目。

看 10 遍教程不如写 1 个小项目。从简单的开始：

1. 个人主页
2. 待办事项应用
3. 天气查询页面
4. 博客系统

遇到问题查 MDN、搜 Stack Overflow、看源码。这是每个前端工程师的日常。

加油，期待你写出自己的第一个完整网站！