学 HTML: 编程课程
学 HTML: 编程课程 — —装进口袋的 HTML 课程，配备实时预览编辑器
学 HTML: 编程课程 是一款适用于 iPhone 和 Android 的 HTML 课程，每节课都配有一键即可打开的 带实时预览的 HTML 编辑器。输入标签，查看页面渲染效果，然后用 40 门短课程，从第一个标题一路学到表单、表格、语义化 HTML5、无障碍功能和 Web Components。
- 价格
- 免费，可升级至 Pro
- 平台
- iOS 和 Android
- 语言
- 22
- 年龄分级
- 4+
- 需要
- iOS 15.1 或更高版本
- App Store
- 3.0 ★ (1)
看过一个标签如何绘制出内容后，你会更明白它的意义。
HTML 是一种标记语言，因此理解新元素最快的方法就是输入它，然后查看结果。应用中的每节课结束时，编辑器都会直接打开，标记旁边就是预览；只有在你准备好时，才需要添加 CSS 或 JavaScript 文件。
这是什么
学 HTML: 编程课程 是一款免费入门的 iOS 和 Android HTML 课程，通过 40 门课程和 159 节短课，按照从初级（A1）到高级（C1）的顺序讲解网页标记。每个主题都配有内置 HTML 代码编辑器和即时预览、20 个引导式项目（例如联系表单和无障碍价格表）、20 个调试任务以及 AI 导师，让完全零基础的初学者也能从空白文档开始，制作出语义清晰、无障碍且结构良好的页面。
应用内
界面展示
课程
HTML 课程涵盖哪些内容
应用自有课程列表中的 40 门课程和 159 节课，按学习路径中的教学顺序排列。
文档结构、文本、链接、图像和列表
每个页面的骨架：文档结构、标题和段落、链接和导航、图像和图示，以及有序列表和无序列表。
表格、属性和全局属性
学习如何用表格组织数据，然后了解用于调整元素的属性，包括适用于每个标签的全局属性。
表单：基础控件、高级控件和验证
先学习基础输入控件，再学习更丰富的控件，最后学习验证属性，让浏览器在字段提交前进行检查。
语义化 HTML5、head 和元数据、音频与视频
语义化元素、文档的 head 及其元数据，以及音频和视频元素。
无障碍、ARIA 角色和高级 ARIA 模式
无障碍基础、ARIA 角色和属性，以及用于自定义组件的高级模式。
数据属性、模板、Canvas、SVG 和 iframe
自定义数据属性、HTML 模板、canvas 元素、HTML 中的 SVG，以及 iframe 中的嵌入内容。
Web Storage、拖放、SEO 和电子邮件模板
Web Storage 和拖放 API、SEO 和社交媒体元标签，以及 HTML 电子邮件模板的特定规则。
Web Components、性能和大规模 HTML
自定义元素、Shadow DOM、import maps 和渐进增强，以及性能、安全性、PWA 和测试，最后学习如何大规模使用 HTML。
工作原理
从阅读到渲染：你如何学会一个标签
课程内容简短，编辑器就在旁边，因此阅读概念和动手尝试可以在同一次学习中完成。
阅读一节短课
从上次停下的地方继续学习路径。每节课只讲一个概念，例如无序列表或带 alt 文本的图像，只需几分钟即可完成。
在编辑器中输入，观看预览效果
打开编辑器并编写标记。预览会重新绘制页面；当你想为页面添加样式或让它产生响应时，CSS 和 JavaScript 标签页也随时可用。
检查、修复并用它构建
每个主题都会以测验和编码挑战收尾。当某个标签或错误让你感到困惑时，AI 导师会为你解释；调试任务会交给你一个需要修复的损坏页面；引导式项目则会帮助你构建出可以展示的作品。
包含内容
Learn HTML 中包含的内容
40
从 A1 到 C1 的课程
159 节课涵盖文档结构、文本、链接、图像和列表，并进一步讲解表格、表单、语义化 HTML5、无障碍功能、Web Components、安全性以及 History and Navigation API。
实时
带预览的 HTML 编辑器
编写标记，查看渲染后的页面实时更新。你可以在同一项目中添加 CSS 和 JavaScript 文件，让普通文档变成一个小型的可运行网站。
20
引导式项目
循序渐进的项目构建，包括食谱盒页面、联系表单、照片画廊、导航栏和无障碍价格表。
20
调试任务
需要你亲自排查的真实故障：提交后毫无反应的注册表单、无法点击的标签，以及在手机上加载时缩放过小的页面。
80
标签速查表
包含 80 个 HTML 标签、元素和属性的查询列表，适合你知道想实现什么，却不知道它叫什么的时候使用。
50
面试问题
50 道 Web 开发者面试题，配有清晰答案；此外还有一个可打开和编辑短示例的代码库，以及用于保存自己的代码和笔记的空间。
背景
什么是 HTML？在手机上输入代码也能学会它吗？
HTML（超文本标记语言）用于描述网页的结构：哪些文字是标题，哪些是段落，链接指向哪里，以及表单要询问什么。它不是编程语言，因此没有循环或变量需要处理，这也是它通常成为学习 Web 开发第一步的原因。由于写下内容后就能立刻看到结果，HTML 很适合利用手机进行短时间学习：标签足够简短，用拇指就能输入，而预览会马上显示是否生效。
元素、标签和属性每节课都会用到的三个词
元素是一段具有特定含义的内容，写在开始标签和结束标签之间，例如段落或列表项。属性位于开始标签内部，用来调整元素，例如链接指向的地址或描述图像的文字。初学者几乎所有错误，不是漏写结束标签，就是把属性放错了位置。
语义化 HTML标题、导航、主体和页脚
语义化元素说明页面某个区块是什么，而不是它看起来怎么样。导航栏、文章和页脚各自都有对应的元素，这有助于屏幕阅读器、搜索引擎，以及之后需要编辑页面的任何人。正是这种习惯，让整洁的页面区别于堆满通用容器的页面。
HTML、CSS 和 JavaScript各自负责什么
HTML 负责承载结构和内容，CSS 控制内容的外观，而 JavaScript 添加交互行为，例如响应点击。先学习 HTML，可以为另外两者提供附着的基础。应用中的编辑器提供独立的 HTML、CSS 和 JavaScript 标签页，让你从一开始就能将三种工作分开。
表单和无障碍功能简单页面变得严肃的地方
表单是页面向访客提出任何请求的方式，也是大多数无障碍问题开始出现的地方：标签无法点击，字段无法被屏幕阅读器识别。标签、验证属性和 ARIA 角色都是很小的标记片段，却决定了页面是否能为所有人正常使用。
是否适合
适合哪些人——不适合哪些人
如果你符合以下情况，就很适合
- 正在编写自己的第一个网页，并希望在使用每个标签前都了解其含义
- 只有能立即看到每一行代码的结果时，才能学得最好
- 正在运营博客、商店页面或作品集，并希望编辑其背后的标记代码
- 计划继续学习 CSS、JavaScript 或前端开发，并希望先打好基础
- 正在准备 Web 开发者面试，并希望通过练习题来备考
如果你符合以下情况，这不是适合你的工具
- 需要包含文件、文件夹和本地服务器的完整桌面工作流
- 希望每门课程都免费；第一门课程、第一个引导项目和两个任务免费，Pro 可解锁其余内容
- 已经每天编写用于生产环境的 HTML，希望要的是参考资料而不是课程
- 想学习设计工具；这里讲的是标记语言以及网页背后的代码
问题
常见问题
学 HTML: 编程课程 是什么？
学 HTML: 编程课程 是一款适用于 iPhone 和 Android 的应用，从第一个标签开始一直讲到高级主题，帮助你学习 HTML。它将 40 门短课程与内置 HTML 编辑器和实时预览、20 个引导项目、20 个调试任务以及一位 AI 导师结合在一起。应用可免费开始使用，并支持 22 种语言。
我真的可以在手机上编写并预览 HTML 吗？
可以。学 HTML: 编程课程 中的编辑器提供 HTML、CSS 和 JavaScript 标签页，预览功能会显示标记代码生成的页面。由于标签较短，手机很适合进行 HTML 所需的专注练习。只有在需要同时处理许多文件时，更大的屏幕才会更有用。
开始学习前需要任何编程经验吗？
不需要。学习路径从 HTML 文档的组成方式开始，并在使用每个术语前用通俗易懂的语言进行解释。HTML 不需要先学习循环或变量，因此 学 HTML: 编程课程 将完全的初学者视为常态，而不是例外。
HTML 和 CSS 有什么区别？
HTML 定义页面上有哪些内容，以及每个部分的含义，例如标题、链接或表单字段。CSS 定义页面的外观，包括颜色、间距和布局。应用先教授 HTML，并允许你在编辑器中添加 CSS 文件，让你看到两者如何协同工作，同时不会混淆它们各自的职责。
学习 HTML 基础需要多长时间？
大多数人在完成几次简短的学习后，就能写出简单且正确的页面，因为核心元素并不多：标题、段落、链接、图像、列表和基础表单。无障碍、语义结构和 Web Components 等更深入的内容需要更长时间。这里的课程设计为几分钟即可完成，因此每天学习很容易坚持。
我可以在应用中制作哪些类型的项目？
20 个引导项目包括食谱盒页面、联系表单、照片画廊、导航栏和无障碍价格表。每个项目都会分步骤完成。它们特意设计得小巧，让你能够完成项目，并将代码保存在已保存的代码片段中。
Learn HTML 会讲无障碍和表单吗？
会，而且内容相当深入。表单包含 3 门课程，涵盖基础控件、高级控件和验证属性。无障碍也有专门课程，讲解基础知识、ARIA 角色和高级 ARIA 模式。调试任务还包括“没人能点击的标签”等问题，让这些主题不再抽象，而是能够通过实践掌握。
这款应用免费吗？Pro 会增加哪些内容？
你可以免费下载并立即开始使用：第一门课程、第一个引导项目、两个任务和实时编辑器均包含在内，同时还提供每日 AI 导师使用额度。Pro 可解锁全部课程、所有项目和任务、证书考试以及无限次 AI 导师提问，并移除广告。
开始使用
输入你的第一个标签，看它立即渲染出来
iOS 和 Android 免费开始使用，支持 22 种语言。
更多 CoddyKit 产品
可在 iOS 和 Android 上使用。