web前端开发

Web 前端开发者

欢迎阅读我们的 Web 前端开发者学习路线图！

该路线图提供一个结构化的课程，教会你成为一名 Web 前端开发所需要了解的一切。通过学习每个章节，获得新技能（或者提升原有的技能）。每个章节都包括练习和评估，让你能够继续之前测试你对章节内容的理解。

涵盖的主题

该路线图涵盖的主题大致范围如下：

• 基础准备以及如何学习
• Web 标准和最佳实践 (例如辅助功能和跨浏览器兼容)
• HTML，一门赋予网站内容结构和意义的语言
• CSS，一门美化网站页面的语言
• JavaScript，用来为网站创建动态功能的脚本语言
• 一些有助于现代化客户端 Web 开发的工具

这些章节是按照学习顺序而进行设计的，但每个章节又自成一体。例如，如果你已经对 HTML 非常熟悉了，你大可放心地跳过这个章节直接学习 CSS 部分。

预备知识

你并不需要任何预备知识以开始这一章节，你仅需要一台可以运行现代浏览器并且联网的电脑和一颗好学之心。

如果你不确定 Web 前端是否适合自己，或是想在开始一个更长、更完整的课程之前先对其有一个更通识的了解，可以先阅读 Web 入门章节。

获得帮助

我们尽量让 Web 前端开发学习尽可能的轻松，但是你仍可能因为一些难以理解的点、或某段无法像预期中的那样工作的代码等原因而止步不前。

无论是新手还是富有经验的开发者都经常遇到困难，但是不要慌。“如何学习”章节提供了一些实用的有关如何查找信息和自行解决问题的提示，如果仍然上述提示仍然无法解决你的问题，大胆的在讨论区提出你的问题。

让我们开始吧，祝你好运！

学习路线图

起步

学习用时：1–2 小时

预备知识

仅需基础的计算机知识。

我怎么知道自己是否可以继续往下学习了？

本章节没有评估测试，但是请不要跳过它 — 这对于帮你准备好应对后面的练习和学习非常重要。

核心提示

• 安装基础软件 (15 分钟) (15 分钟)
• Web 和 Web 标准的背景介绍 (45 分钟)
• 学习和获得帮助 (45 分钟)

HTML 语义和结构

学习用时：35–50 小时

预备知识

基础的计算机知识和基本的 Web 开发环境。

我怎么知道自己是否可以继续往下学习了？

每个模块的评估练习都是针对测试你主题相关知识掌握能力设计的，完成了每个练习就表示你可以继续往后学习下一个模块了。

核心模块

• HTML 介绍 (15–20 小时阅读/练习)
• 多媒体与嵌入 (15–20 小时阅读/练习)
• HTML 表格 (5–10 小时阅读/练习)

使用 CSS 布局和美化

学习用时：90–120 小时

预备知识

学习 CSS 前需要有基础的 HTML 知识，请至少学习完 HTML 介绍再开始。

我怎么知道自己是否可以继续往下学习了？

每个模块的评估练习都是针对测试你主题相关知识掌握能力设计的，完成了每个练习就表示你可以继续往后学习下一个模块了。

核心模块

• 学习 CSS 的第一步 (10–15 小时阅读/练习)
• 编写 CSS (35–45 小时阅读/练习)
• 添加文本样式 (15–20 小时阅读/练习)
• CSS 布局 (30–40 小时阅读/练习)

额外资源

• CSS 布局 cookbook

使用 JavaScript 开发交互

学习用时：135–185 小时

预备知识

学习 JavaScript 前需要有基础的 HTML 知识，请至少学习完 HTML 介绍再开始。

我怎么知道自己是否可以继续往下学习了？

每个模块的评估练习都是针对测试你主题相关知识掌握能力设计的，完成了每个练习就表示你可以继续往后学习下一个模块了。

核心模块

• JavaScript 第一步 (30–40 小时阅读/练习)
• 编写 JavaScript (25–35 小时阅读/练习)
• 客户端 Web API (30–40 小时阅读/练习)
• JavaScript 对象入门 (25–35 小时阅读/练习)
• 异步 JavaScript (25–35 小时阅读/练习)

Web 表单 — 处理用户数据

学习用时：40–50 小时

预备知识

高效使用 Web 表单需要 HTML、CSS 和 JavaScript 知识。鉴于与表单打交道的复杂性，这一节被独立了出来。

我怎么知道自己是否可以继续往下学习了？

每个模块的评估练习都是针对测试你主题相关知识掌握能力设计的，完成了每个练习就表示你可以继续往后学习下一个模块了。

核心模块

• Web 表单 (40–50 小时)

让所有人都能使用 Web

学习用时：45-55 小时

预备知识

学习本章前最好对 HTML、CSS 和 JavaScript 都有一定了解— 本章很多技术和最佳实践都需要用到它们。

我怎么知道自己是否可以继续往下学习了？

每个模块的评估练习都是针对测试你主题相关知识掌握能力设计的，完成了每个练习就表示你可以继续往后学习下一个模块了。

核心模块

• 跨浏览器测试 (25–30 小时阅读/练习)
• 无障碍（辅助功能） (20–25 小时阅读/练习)

现代工具

学习用时：55–90 小时

预备知识

学习本章前最好对 HTML、CSS 和 JavaScript 都有一定了解— 本章很多技术和最佳实践都需要用到它们。

我怎么知道自己是否可以继续往下学习了？

本章节各模块均没有评估测试，但是第 2 章和第 3 章的学习教程应该能够让你很好的掌握现代工具的要义。

核心模块

• Git 和 GitHub (5 hour read)
• 客户端 Web 开发工具入门 (20–25 hour read)
• 客户端 JavaScript 开发框架入门 (30-60 hour read/exercises)

Found a content problem with this page?

• Edit the page on GitHub.
• Report the content issue.
• View the source on GitHub.

Want to get more involved? Learn how to contribute.

This page was last modified on 2022年11月27日 by MDN contributors.