HTML5 从入门到精通

涵盖 HTML5 Living Standard 全部核心知识，从零基础到高级应用的完整学习路径。

教程简介

本教程系统讲解 HTML5（HyperText Markup Language）的全部核心知识，从基础概念到高级特性，帮助你掌握 Web 开发的基石。教程遵循 WHATWG HTML Living Standard，内容涵盖文档结构、文本语义、嵌入内容、表单交互、语义化标签、全局属性与事件、HTML5 新特性（拖放、Web 存储、WebSocket、Service Worker 等）、Canvas/SVG 图形编程、无障碍设计与国际化，以及 SEO 优化和安全实践。

教程采用循序渐进的学习路线，每个页面包含基础概念讲解、详细的语法说明、完整的实战代码示例、注意事项和最佳实践。代码示例均基于最新 HTML5 标准，可直接在浏览器中运行。

12 个学习阶段，循序渐进
276 个知识页面，深入详尽
覆盖 HTML5 Living Standard 最新特性

适合人群

零基础 Web 开发初学者
希望系统学习 HTML5 的前端开发者
需要巩固 HTML 语义化和无障碍的设计师
全栈开发者回顾 HTML 基础知识

学习路线

第一部分：基础入门

阶段	主题	页数	简介
1. 入门指引	HTML 概述与环境搭建	21	HTML 是什么、发展历史、环境搭建、开发工具、Web 标准
2. 文档结构	HTML 文档骨架与元信息	17	DOCTYPE、head/body、meta 标签、外部资源引入
3. 文本内容	文本语义与超链接	41	标题段落、行内语义、列表、超链接

第二部分：富媒体与交互

阶段	主题	页数	简介
4. 嵌入内容	图像、音视频、Canvas、SVG	26	响应式图片、多媒体播放、Canvas 绘图、SVG 矢量图
5. 表格	数据表格的完整指南	8	表格结构、合并单元格、无障碍表格
6. 表单	表单输入与验证体系	42	表单控件、日期时间、验证 API、自定义验证

第三部分：语义化与高级特性

阶段	主题	页数	简介
7. 语义化标签	文档语义结构	18	header/nav/main/article、dialog、语义化最佳实践
8. 全局属性与事件	通用属性和事件处理	23	id/class、data-*、ARIA、鼠标/键盘/表单事件

第四部分：HTML5 新特性与多媒体

阶段	主题	页数	简介
9. HTML5 新特性	现代 Web API	31	拖放、Web 存储、地理定位、Workers、WebSocket、SSE、History API
10. 多媒体与图形	Canvas 高级绘图与 SVG	18	2D 绑定、路径变换、像素操作、SVG 动画、Web Audio API

第五部分：工程实践

阶段	主题	页数	简介
11. 无障碍与国际化	A11y 与 i18n	15	WCAG 原则、ARIA、焦点管理、多语言适配
12. 最佳实践与性能	代码规范与优化	24	编码规范、SEO、性能优化、安全实践（XSS/CSP/SRI）

版本速查

版本	年份	核心特性
HTML 2.0	1995	表单、表格基础
HTML 3.2	1997	applet、script 标签
HTML 4.01	1999	CSS 分离、script 增强
XHTML 1.0	2000	XML 语法严格化
HTML5	2014	语义标签、Canvas、Web 存储、多媒体
HTML Living Standard	持续更新	popover、dialog、declarative Shadow DOM、importmap

快速开始

下面是一个最简单的 HTML5 页面：

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的第一个网页</title>
</head>
<body>
    <h1>Hello, HTML5!</h1>
    <p>这是一个 HTML5 页面。</p>
</body>
</html>

将以上代码保存为 index.html，用浏览器打开即可看到效果。

HTML5 从入门到精通 ​

教程简介 ​

学习路线 ​

第一部分：基础入门 ​

第二部分：富媒体与交互 ​

第三部分：语义化与高级特性 ​

第四部分：HTML5 新特性与多媒体 ​

第五部分：工程实践 ​

版本速查 ​

快速开始 ​