📚 HTML 学习资源库

精选的 HTML 学习资源，帮助你从入门到精通

← 返回课程
🎬

视频教程

HTML 完整视频教程系列

通过 22 集视频系统学习 HTML，从入门到精通！每集约 5-15 分钟，适合循序渐进学习。

22集完整系列中文讲解免费观看

📋 涵盖内容：

  • ✓ HTML 基础语法和结构
  • ✓ 文本、链接、图片标签
  • ✓ 列表、表格、表单
  • ✓ 语义化标签和最佳实践
  • ✓ 实战项目演练

💡 提示：建议按顺序观看，边看边动手实践效果最佳

📚

在线文档

MDN Web Docs - HTML →

最权威的 HTML 参考文档，由 Mozilla 基金会维护

权威中文

W3Schools HTML 教程 →

友好的在线教程，包含大量实例和在线编辑器

初学者友好在线练习

HTML Living Standard →

WHATWG 维护的 HTML 官方规范

官方规范深入学习

菜鸟教程 - HTML →

中文教程，适合中国学习者

中文示例丰富
🛠️

在线工具

CodePen →

在线代码编辑器，可以即时预览 HTML/CSS/JS 效果

在线编辑分享作品

JSFiddle →

另一个流行的在线代码编辑器

在线编辑协作

HTML Validator →

W3C 官方 HTML 验证工具，检查代码规范性

验证工具代码质量

Can I Use →

查询 HTML 标签和属性的浏览器兼容性

兼容性实用工具
💪

练习平台

freeCodeCamp →

免费编程学习平台，包含完整的 HTML 课程和项目

免费项目实战

Codecademy →

互动式编程学习平台

互动学习即时反馈

Frontend Mentor →

真实的前端开发挑战，提升实战能力

实战项目挑战
📖

参考速查

HTML 元素参考 →

MDN 提供的完整 HTML 标签列表

速查表完整列表

HTML 属性参考 →

MDN 提供的 HTML 属性完整列表

速查表属性列表

HTML Cheat Sheet →

HTML 快速参考卡片

速查表简洁
🚀

进阶主题

HTML 语义化指南 →

学习如何编写语义化的 HTML 代码

最佳实践SEO

无障碍访问 (Accessibility) →

了解如何让网页对所有人都友好

无障碍包容性设计

HTML 表单最佳实践 →

深入学习表单设计和验证

表单用户体验
💡

学习建议

🎯 学习路径

  1. 1. 先看视频教程，建立整体概念
  2. 2. 查阅 MDN 文档，深入理解细节
  3. 3. 在 CodePen 上动手实践
  4. 4. 完成练习平台的挑战项目
  5. 5. 创建自己的个人网站作品

✨ 最佳实践

  • • 边学边做，不要只看不练
  • • 使用语义化标签，提升代码质量
  • • 关注无障碍访问，让网页更友好
  • • 用 HTML Validator 检查代码规范
  • • 加入开发者社区，与他人交流

💪 持续学习，不断进步！

如果你发现了好的学习资源，欢迎分享给我们