苏鹏HTML5视频教程-365资源论坛提供

这套《苏鹏HTML5视频教程》聚焦的是 HTML5 中新增的语义化标记体系——也就是 header、nav、main、article、section、aside、footer 这一类用来描述文档结构而非仅仅描述外观的元素。它不铺开讲整条前端学习路线，而是把「如何用新标记组织一个网页文档」这件事拆开讲透，适合已经会写基本 HTML、但对语义化标签的取舍拿不准的人拿来对照实践。

技术栈定位：只讲标记层，不讲框架

课程停留在 HTML5 的标记与文档结构层面，不涉及构建工具、前端框架或样式预处理器。这意味着它的复用方式不是「照着敲一遍项目」，而是把视频里对同一段页面结构的几种写法拿来做横向对比：同一个内容块，用 div + class 写和用语义化标签写，DOM 树长什么样、可读性差多少、后续被 CSS 和脚本选中时有什么差别。这种对比在真实项目里很难自发做，因为一旦用了某个框架的模板语法，语义标签往往被组件名替代，反而看不出差别。

内容组织的几个核心点

• 新增标记的语义边界：哪些元素是区块级、哪些是行内语义、哪些容易被误用成通用容器。特别是 section 与 div、article 与 section 之间的选择依据，这是实际写页面时最容易含糊的地方。
• 文档大纲与嵌套关系：标题层级与区块嵌套如何共同决定页面结构，嵌套错了大纲就散了，浏览器和辅助技术读出来的结果会偏离预期。
• 内容定位型标记的用途：把导航、正文、侧栏、页脚这些「网页内容的功能位置」用标签固定下来，而不是靠 id 和 class 约定。
• 与旧写法的迁移：已有页面如何逐步替换，哪些地方替换收益高，哪些地方保持 div 更合理。

这些点单独看都不复杂，但要在同一个页面里同时处理好，需要有一个统一的判断标准。课程的价值在于把这个标准讲出来，而不是逐个标签背定义。

资料结构与使用方式

这是一套按知识点分段的视频资料，配套有章节笔记，适合课后做复盘。这里建议的用法是：不要一次刷完，每看完一个标记相关的片段，就找一个自己熟悉的页面（比如一个博客列表页或后台的内容详情页），把那一段结构重写一遍，然后对比修改前后的 DOM 结构和可读性。笔记的作用在于记录你当时的判断依据，比如「这里用 article 是因为它独立成篇」，而不是抄标签定义——过一段时间回头看，判断依据比定义有用得多。

如果手头有旧项目，更实际的做法是挑一个静态页面做一次语义化重构，改完用浏览器开发者工具检查大纲结构，再对照视频里的讲法确认取舍是否站得住。这一步做完，这套资料的利用率会比单纯看视频高很多。

适合谁看，以及自学路径上的位置

适合已经能独立写出一个完整静态页面、但写出来的结构以 div 为主的人，也适合需要给团队定标记规范、想找一份参照说法的开发者。它不是一个从零开始的入门课，如果没有 HTML 基础，先补基本标签和文档流会更顺。

在自学路径上，这套资料处在「能写」到「写得规范」之间的那一环。往后接 CSS 布局、接无构建的静态站点、再接前端框架时，语义化结构这块基础会一直起作用——框架换了几轮，文档结构该有的判断标准没怎么变。把这一环补上，后面学组件化的时候会少一层「为什么模板里要这么写」的困惑。

需要提醒的是，这套资料偏向标记本身，不覆盖表单校验、媒体元素、Canvas 等 HTML5 的其他方向。如果你关注的是交互与图形，需要另外找对应内容补齐；如果你关注的是文档结构这一块，那它的覆盖是够的，值得作为一份可以边看边改代码的参照材料。