HTML5 入门教程

先判断值不值得学

如果你在日常工作里需要偶尔改一改活动页结构、调一调邮件模板，或者正打算从运营、设计、测试岗往 Web 前端转，那么 HTML5 这层基础是绕不开的。这门课解决的问题很具体：让你不再只把 HTML 当成排版标签，而是知道哪些标签自带语义、哪些 API 能直接在浏览器里存数据、画图形、做拖拽和实时通信。它的价值不在于让你立刻写出复杂交互，而在于帮你把“标签能干什么、浏览器能干什么”这件事一次理清，避免之后学 CSS 和 JavaScript 时还要回头补地基。如果你已经能独立用框架搭中型项目，这门课里大部分内容对你可能偏浅；但如果你对 Web Storage、Canvas、WebSocket 这些词只听过名字却说不出适用场景，那它正好补这块认知。

建议先看哪几块、怎么配合练

资料是按特性专题展开的，建议别从第一页顺着刷，而是按“高频工作场景”挑着学。第一优先级是语义化标签和 Web 表单：这两块直接决定你写的页面结构是否规范、表单校验能不能少写脚本。看完后立刻拿一个现有的旧页面重写一遍，把 div 满天飞换成 header、section、article，把表单字段加上 required、pattern，验证一遍效果。第二优先级是 Canvas、SVG 和多媒体标签，适合需要做简单数据图、 banner 动效或嵌入音视频的场景；学的时候不要只看文档，自己建一个空页面，照着示例画一个柱状图、嵌入一段视频并加上自定义控件。第三块是 Web Storage、IndexedDB 和 WebSockets，它们偏应用层，学完最好配一个极小的本地记事本 demo 或聊天页 demo，把存取数据和推送流程跑通，才算真正消化。资料里的代码片段建议边看边复制到本地编辑器里改参数，不要只靠眼睛过一遍。

学完能独立做什么

把这门课的内容吃透后，你能独立完成几件具体的事：一是搭出一个结构清晰、对搜索引擎和读屏器都友好的内容页，而不是全靠 div 堆出来的“无语义壳”；二是用原生表单控件和属性完成常见的输入校验，减少对额外脚本的依赖；三是在不引入重前端框架的前提下，用 Canvas 或 SVG 做出轻量的图表和简单图形交互；四是判断一个功能该用本地存储、IndexedDB 还是与服务端走 WebSocket，并且能把最小可用的调用代码写出来。这些能力组合起来，足够支撑你去维护中小型官网、活动页、后台表单页，也为后续学 CSS 布局和 JavaScript 逻辑打下能直接动手的地基，而不是停留在“知道有这个标签”的层面。