0Pricing
HTML Academy icon

HTML Academy

HTMLWebFrontendBeginner

通过在 HTML Academy 学习 HTML,为网络开发打下坚实基础。

🤖 AI 驱动📚 40 门课程👥 10万+ 学习者⭐ 4.9 分
课程概览

HTML:每个网页背后的语言

HTML 是网络的结构基础——每个浏览器标签页、表单提交和嵌入式视频都始于标记。这个学习路径建立真正的 HTML 流畅度,从规范有效文档的规则到现代生产网站中使用的浏览器 API 和组件模型。目标不仅是编写标签,而是理解每个元素存在的原因以及它对浏览器、辅助技术和搜索引擎的含义。

你将学到什么

你将从文档结构、文本内容、链接、图像和列表开始,然后深入表格、表单和表单验证属性。这个学习路径涵盖语义 HTML5 元素、<head> 和元数据、音频和视频,以及包括 ARIA 角色和属性的无障碍基础。后续课程涉及自定义数据属性、HTML 模板、Canvas 和 SVG 元素、Web Storage、拖放 API、SEO 和社交元标签以及 HTML 电子邮件模板。高级部分深入讨论 Shadow DOM、Web Components 和自定义元素、HTML 模块和导入映射、渐进式增强、国际化、安全性、History 和 Navigation API、Intersection Observer,以及为渐进式网络应用构建 HTML。

学习路径

四十门课程从 A1 进阶到 A2 和 B1 再到 B2,最后以关于 HTML at Scale 的 C1 顶石课程结束。A1 和 A2 课程建立基础——文档结构、语义元素、表单和元数据。B1 介绍无障碍、ARIA、Canvas、SVG 和浏览器存储。B2 是最大的模块,涵盖 Web Components、Shadow DOM、性能、安全性、国际化和 Intersection Observer。最后的 C1 课程 HTML at Scale 讨论在大型代码库中编写、测试和维护 HTML 时重要的模式和限制。

工作方式

每门课程分为短小的实践课程,你在内置代码编辑器中完成,并获得实时反馈。当你遇到困难时,AI 导师随时可用,你按自己的节奏学习——每节课都是独立的,所以你可以随时返回任何主题作为参考。

开始学习 →

你的学习方式

🎯
互动课程
实时反馈的动手编程练习
🤖
AI 导师
遇到困难时立即获得 AI 帮助
💻
内置编辑器
直接在浏览器中编写并运行代码
🏆
证书
完成课程后获得证书
课程

40 门课程

HTML Academy 学习路径中的所有课程。

01

HTML 文档结构

A13 节课

学习浏览器如何解析 HTML、DOCTYPE 的作用,以及 html、head 和 body 元素如何组织每个网页。

02

文本内容元素

A14 节课PRO

掌握标题、段落、强调、行内元素,以及使用 HTML 文本标签控制空白。

03

链接与导航

A14 节课PRO

使用锚元素、绝对 URL 和相对 URL、新标签页链接及片段标识符构建导航。

04

图像与图形

A14 节课PRO

使用 img、srcset、picture 元素和语义化图注实现响应式图像展示。

05

列表

A14 节课PRO

通过正确的嵌套和语义含义创建无序列表、有序列表和描述列表。

06

表格

A24 节课PRO

使用正确的结构、跨行跨列单元格和表格分区构建无障碍数据表格。

07

HTML 属性与全局属性

A24 节课PRO

理解所有 HTML 元素通用的 id、class、style、hidden、tabindex 和自定义 data-* 属性。

08

HTML 表单基础

A24 节课PRO

使用输入类型、标签、按钮,以及表单元素的 action 和 method 属性构建无障碍网页表单。

09

高级表单控件

A24 节课PRO

使用下拉菜单、文本域、复选框组、单选按钮和通过 datalist 实现的自动补全增强表单。

10

表单验证属性

A24 节课PRO

使用 required、pattern、min 和 max 等 HTML5 验证属性,在提交前验证用户输入。

11

语义化 HTML5

A24 节课PRO

使用 header、nav、main、footer、article 和 section 等有意义的 HTML5 元素替代通用 div。

12

更多语义化元素

A24 节课PRO

探索 aside、details、summary、progress 和 meter,为网页添加更丰富的含义与交互性。

13

HTML 头部与元数据

A24 节课PRO

掌握 head 部分:title、meta 标签、viewport、规范 URL、robots 指令和网站图标。

14

音频与视频元素

A24 节课PRO

使用 HTML5 原生嵌入音频和视频,提供多种格式,并通过 track 和 WebVTT 添加字幕。

15

HTML 无障碍基础

B14 节课PRO

理解 WCAG 等级、标题层级、替代文本策略,以及面向包容性网页的键盘导航。

16

ARIA 角色与属性

B14 节课PRO

使用 ARIA 角色、标签和描述增强无障碍体验,并遵循优先使用原生 HTML 的原则。

17

自定义数据属性

B14 节课PRO

使用 data-* 属性、dataset API 和 CSS 选择器在 HTML 元素上存储和访问自定义元数据。

18

HTML 模板

B14 节课PRO

使用 template 元素定义非活动标记,高效克隆模板,并将其与基于 innerHTML 的渲染进行比较。

19

Canvas 元素

B14 节课PRO

在二维画布上绘制形状、文本和图像,并使用 requestAnimationFrame 为其添加动画。

20

HTML 中的 SVG

B14 节课PRO

以内联方式嵌入可缩放矢量图形,使用基本形状,控制 viewBox,并通过 CSS 为 SVG 添加动画。

21

iframe 与嵌入内容

B14 节课PRO

使用 iframe 嵌入外部内容,理解用于安全防护的沙箱机制,并使用延迟加载提升性能。

22

HTML Web Storage

B14 节课PRO

使用 localStorage 和 sessionStorage 存储客户端数据,监听存储事件,并遵循安全指南。

23

拖放 API

B14 节课PRO

使用 HTML5 拖放 API 和 dataTransfer 对象实现拖放交互。

24

SEO 与社交元数据

B14 节课PRO

使用 OpenGraph、Twitter Cards、JSON-LD 和 hreflang 优化网页在搜索引擎和社交平台上的表现。

25

HTML 电子邮件模板

B14 节课PRO

使用基于表格的布局、内联样式和跨客户端图像技术构建适用于电子邮件的 HTML。

26

高级 ARIA 模式

B24 节课PRO

实现切换模式、标签页界面和实时区域,并使用真实的屏幕阅读器进行测试。

27

HTML 性能

B24 节课PRO

通过 async 和 defer 脚本、预加载提示、延迟加载图像和资源提示加快网页加载。

28

Web Components 自定义元素

B24 节课PRO

使用自定义元素 API、生命周期回调和观测属性定义可复用的自定义 HTML 元素。

29

Shadow DOM

B24 节课PRO

将标记和样式封装在 Shadow DOM 中,使用插槽分发内容,并通过 part 暴露样式 API。

30

HTML 模块与导入映射

B24 节课PRO

使用 ES 模块脚本、用于裸模块说明符的导入映射、动态导入和模块联邦概念。

31

渐进式增强

B24 节课PRO

采用渐进式增强进行构建:从稳固的 HTML 开始,逐层添加 CSS 和 JavaScript,并正确检测功能。

32

国际化

B24 节课PRO

使用 lang、dir、bdi、bdo 和 charset,并支持从右到左的文本,为全球用户准备 HTML

33

HTML 安全

B24 节课PRO

使用 CSP、沙箱、SRI 和安全的 HTML 处理实践,保护页面免受 XSS、点击劫持和注入攻击

34

HTML 表单高级 API

B24 节课PRO

运用 FormData、约束验证 API、自定义有效性消息和表单状态管理

35

HTML 历史记录与导航 API

B24 节课PRO

使用 pushState、popstate 事件和现代 Navigation API 管理浏览器历史记录,实现 SPA 路由

36

Intersection Observer

B24 节课PRO

使用 IntersectionObserver 实现延迟加载、无限滚动和滚动关联的动画触发器

37

用于 PWA 的 HTML

B24 节课PRO

通过 Web 应用清单、服务工作线程注册和离线备用页面配置渐进式 Web 应用

38

HTML 验证与测试

B24 节课PRO

使用 W3C Validator 验证标记,使用 Lighthouse 审查 HTML,并使用 pa11y 和 axe 测试无障碍性

39

HTML 的未来

B24 节课PRO

预览新兴 HTML 功能:声明式 Shadow DOM、Popover API、selectlist 和 command 属性

40

大规模 HTML 开发

C14 节课PRO

通过组件提取、服务器端模板、设计系统和样式指南文档,在大型项目中管理 HTML

常见问题

常见问题解答

HTML Academy 课程免费吗?

免费。你可以免费开始 HTML Academy 课程并完成它的所有互动课程。可选的 PRO 订阅解锁高级 AI 工具和可分享的证书。

学习 HTML 需要有先前的经验吗?

不需要。课程从基础开始,逐步进阶到更高难度的主题,所以即使你没有任何 HTML 基础也可以开始。

我在 CoddyKit 上怎样学习 HTML?

学以致用。简洁的互动课程将清晰的讲解与实时动手编程练习结合,24/7 AI 导师在你遇到困难时提供个性化帮助。

完成 HTML Academy 后能获得证书吗?

可以。PRO 学员可以参加考试,获得 HTML Academy 课程的可分享的完成证书,其中包含可验证的代码。

我能在手机上学习 HTML 吗?

可以。CoddyKit 支持网页版和原生 iOS、Android 应用,你可以在任何设备上学习 HTML,进度会自动同步。

立即开始 HTML Academy

加入数千名学习者,通过 AI 驱动的课程掌握编程。

免费开始 →浏览所有课程