HTML Code Play: Learn HTML

通过修改代码并观察其效果来学习 Web 开发。HTML Code Play 将 HTML、CSS 和 JavaScript 课程与移动代码编辑器、可运行示例、测验和编程游戏相结合。您可以利用它学习概念、亲自动手实践，并在同一设备上跟踪学习进度。

阅读、编辑和运行

浏览学习目录，打开教程并阅读其解释以及完整的代码示例。将示例发送到编辑器，运行原始代码，然后更改标签、样式或表达式并比较输出结果。这种实践性强的工作流程将您阅读的语法与它创建的页面或行为联系起来。

工作区支持 HTML、CSS 和 JavaScript 编辑，并带有语法高亮显示。在实验过程中，您可以使用撤销和重做功能，查找文本、跳转到特定行并调整编辑器字体大小。如果您需要一个新的页面作为起点，可以创建新页面或选择现有模板。打开 HTML 文件，保存您的工作，使用“另存为”创建另一个副本，或通过设备的共享选项共享代码文件。

引导式学习与练习

本课程涵盖 11 个 Web 技术主题，从页面结构和样式到脚本编写、矢量图形、响应式布局和交互式示例。您可以按标题或章节搜索课程，找到所需内容。将有用的教程置顶以便集中复习，添加您自己的课程笔记，并使用“上一页”和“下一页”控件在教程之间切换。

每个教程都包含讲解、语法和可运行的示例。您可以进行主题测验或练习挑战。练习题要求您完成缺失的代码，并提供提示和答案反馈，帮助您检查遗漏的细节。测验结果可帮助您在返回课程之前检验理解程度。

六种练习方式

选择一款编程游戏来练习不同的技能：

- 代码构建器：重新排列代码块以重建可运行的代码。

- 输出侦探：预测代码片段的输出结果。

- 错误查找：找出错误的代码行。

- 填空：选择缺失的代码标记。

- 匹配实验室：将术语与其含义联系起来。

- 快速问答：在限定时间内回答判断题。

活动等级会记录结果并解锁下一步。您可以重玩已解锁的关卡以提高分数，或使用不断更新的混合练习歌单。

保持学习井然有序

进度屏幕会按技术类型汇总已复习的课程、测验和练习。查看您的技能图谱和建议的下一步学习计划，从“主页”继续学习课程，并接受每日挑战。连胜和挑战徽章会让您的学习活动一目了然。可选的学习提醒需要通知权限，您可以将其关闭。

您的课程进度、笔记和游戏结果都存储在设备上。学习屏幕控件包括更大的字体、更高的对比度和更少的动态效果。单独的 HTML、CSS 和 JavaScript 评估会提供应用内成就证书；这些是应用学习记录，并非认证资格。

在线社区帖子在联网时会提供另一种代码资源供您探索。网络支持的内容和加载外部资源的示例需要访问互联网；本地进度存储不支持云同步。

对于初学者、学生以及重新学习前端概念的人来说，可以从一个例子入手，做一些小的改动，并通过实践来加深理解。