高洛峰HTML5视频教程（共12节课）

高洛峰这套 HTML5 教程只有 12 节，放在今天动辄上百集的视频课里算是个"轻量包"。但轻量不等于水——它更像是把 HTML5 里真正会天天用到的那部分抽出来讲了一遍，而不是把规范文档念一遍。如果你是那种喜欢先看目录判断含金量、再决定要不要花时间的人，这套课的结构值得先掂量一下。

12 节的容量，决定了它讲什么、不讲什么

12 节课能承载的内容是有天花板的。这意味着它不可能把 HTML5 的每个 API 都铺开，必然会做取舍。从课程定位看，它更偏向"语义化标签 + 表单增强 + 多媒体元素 + 基础 Canvas/存储"这条主线，也就是前端日常写页面时真正会碰到的部分。至于 Web Workers、WebSocket、地理定位这类偏进阶或偏特定场景的 API，大概率只是点到为止甚至不涉及。

所以判断这套课适不适合你，关键看你缺的是哪一块。如果你写页面还在用一堆 div 堆结构、表单校验全靠 JS 手写，那这 12 节的密度刚好能补上短板；如果你已经在做复杂交互应用，指望从里面挖出性能优化或架构层面的东西，期望就要放低。

值得精看的几类章节

• 语义化标签那几节：这是 HTML5 最容易被轻视、又最能体现基本功的部分。header、nav、article、section、aside 什么时候用哪个，很多人写了几年也没搞清楚。这几节建议放慢看，配合自己手头的旧页面做重构练习。
• 表单相关章节：新增的 input 类型和校验属性，能省掉大量重复的 JS 校验代码。这部分属于"看完就能用"的类型，性价比最高。
• 音视频与 Canvas 入门：这两块是 HTML5 区别于旧版 HTML 的标志性能力。12 节的篇幅下，Canvas 多半只能讲到基础绘图，别指望做出完整游戏，但理解坐标系和绘图上下文足够。
• 本地存储：localStorage、sessionStorage 的用法和坑，属于面试常问、项目常用的知识点，值得单独做笔记。

反过来说，如果某一节明显是"概念介绍"性质、没有配套代码演示，可以倍速过，把时间留给能动手的部分。

资料包怎么拆开用

这套资料里除了视频本身，还有一张截图类的附件。别小看这类附带图，很多时候它是课程的知识点脉络图或者代码结构示意，用它当"地图"比从头盲看效率高。建议的用法是：先扫一遍图，建立整体框架，再带着"这一节在图里对应哪块"的问题去看视频，看完回头在图或自己的笔记上做标记。

视频本身不建议一次刷完。12 节按每天 2 节算，一周左右能过一遍，但真正吸收靠的是每节看完后立刻敲一遍代码。HTML5 的标签和 API 都是"手熟"型知识，光看演示记不住属性名的拼写和参数顺序。

学完之后做什么，比学的时候更关键

HTML5 单独拿出来并不构成一个岗位方向，它是前端甚至后端渲染层的基础设施。所以这套课的正确用法是"补基础"，而不是"当项目经历"。学完后比较实在的动作是：找一两个现成的静态页面模板，用语义化标签重写结构，把表单换成 HTML5 原生校验，再嵌一段音视频或简单 Canvas 动画。这样产出的东西虽然小，但能说清楚"我为什么这么写"，比堆一堆 API 名词有用得多。

另外提醒一句，HTML5 规范这些年有过修订，部分早期教程里的写法（比如某些废弃属性）现在已不推荐。看课时保持一点怀疑，遇到不确定的标签或属性，顺手去查一下当前的标准写法，别把过时用法固化成习惯。这大概是自学老课最需要养成的意识。