---
title: 学习 Web 开发
slug: learn
tags:
  - CSS
  - HTML
  - Web
  - 交互式网站
  - 初学者
  - 前端
  - 启程
  - 学习
  - 学习Web开发
  - 索引
  - 网站
translation_of: Learn
---
{{LearnSidebar}}

欢迎来到 MDN 学习区。本系列文章面对零基础 Web 开发初学者，包含编写简单网站的必备知识。

这不是一个“从入门到精通”的教程，只希望你做到“从入门到适应”。打好基础后，你便可以进行 [MDN 的其他内容](/zh-CN/)，并接触到其他中、高级资源。

从零开始学习 Web 开发极富挑战性，我们将为你提供详细的资料，手把手帮助你轻松愉快地学习。无论你是正在学习 Web 开发的学生（自学或参与课程）、寻找材料的老师、编程爱好者，亦或仅仅想了解一点点 Web 技术，这里都能找到所需信息。

## 有什么新鲜事？

学习区内容正在不断更新。记得常来查看！

如果你期望添加其他相关主题，请到 [论坛](https://discourse.mozilla.org/c/mdn) 留言。

> **标注：**
>
> #### 想成为一名前端工程师？
>
> 我们为你准备了全套系列教程，希望能助你一臂之力。
>
> [**点击开始**](/zh-CN/docs/Learn/Front-end_web_developer)

## 从哪里开始？

- 零基础的初学者
  - : 如果你完全没有 Web 开发背景，那么我们推荐通过 [Web 入门](/zh-CN/docs/Learn/Getting_started_with_the_web) 模块来学习，它采用了实践学习的方式帮你入门。
- 提高阶段
  - : 如果你具备了一定的开发知识，下一步就是深入学习 {{glossary("HTML")}} 和 {{glossary("CSS")}}。先学习 [HTML入门](/zh-CN/docs/Learn/HTML/Introduction_to_HTML)，再学习 [CSS 初步](/zh-CN/docs/Learn/CSS/First_steps)。
- 学习脚本
  - : 在完成 HTML 和 CSS 入门课程之后，或者你只关心编写代码，可以继续学习 {{glossary("JavaScript")}} 或服务器端开发。可通过[JavaScript 初步](/zh-CN/docs/Learn/JavaScript/First_steps) 和 [服务器端初步](/zh-CN/docs/Learn/Server-side/First_steps) 开始学习。
- 框架与工具
  - : 在掌握了 HTML、CSS、JavaScript 的主要技能后，可以继续学习 [前端开发工具](/zh-CN/docs/Learn/Tools_and_testing/Understanding_client-side_tools)，并考虑开始研究 [ JavaScript 前端框架](/zh-CN/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks)，以及 [网站服务器端编程](/zh-CN/docs/Learn/Server-side)。

> **备注：** 可在 [词汇表](/zh-CN/docs/Glossary) 中查询术语。另外对于日常开发遇到的疑问，可以尝试在 [常见问题](/zh-CN/docs/Learn/Common_questions) 寻找答案。

{{LearnBox({"title":"随机术语"})}}

## 涵盖的主题

以下是 MDN 学习区涵盖的所有主题列表：

- [Web 入门](/zh-CN/docs/Learn/Getting_started_with_the_web)
  - : 为零基础的初学者提供一个实用的 Web 开发入门。
- [HTML 构建网站](/zh-CN/docs/Learn/HTML)
  - : 我们用 HTML 来构造网站各部分内容，定义它们的内涵或目的。本主题详细讲解 HTML。
- [CSS 风格化站点](/zh-CN/docs/Learn/CSS)
  - : 可以使用 CSS 语言对 Web 内容进行设计、布局、添加动画等操作。本主题提供了详尽的 CSS 指导。
- [JavaScript — 动态客户端脚本语言](/zh-CN/docs/Learn/JavaScript)
  - : JavaScript 是用于向网页添加动态功能的脚本语言。本主题讲解了编写和理解 JavaScript 所需的所有基础要点。
- [Web 表单 - 操作用户数据](/zh-CN/docs/Learn/Forms)
  - : Web 表单是一种强大的交互工具，通常用于从用户处收集数据，以及为用户提供操作界面。本主题中我们将对 Web 表单的结构、样式、交互的要点进行介绍。
- [可访问性 - 让每个人都能畅游网络](/zh-CN/docs/Learn/Accessibility)
  - : 开发人员努力让更多的人访问 Web 内容，而不受残疾、设备、地区等因素的限制，我们称之为“可访问性”（Accessibility）。本主题提供所需了解的内容。
- [Web 性能优化 - 让网站更快做出响应](/zh-CN/docs/Learn/Performance)
  - : Web 性能优化工作，可在同等带宽、屏幕尺寸、网络条件、设备性能的，带来更快的 Web 应用下载速度和交互响应。
- [工具和测试](/zh-CN/docs/Learn/Tools_and_testing)
  - : 本主题介绍了开发人员常用的效率工具，如跨浏览器测试工具、代码检查工具、代码格式化工具、转换工具、版本控制系统、部署工具、客户端 JavaScript 框架等。
- [服务器端网站编程](/zh-CN/docs/Learn/Server-side)
  - : 即使你专注于前端开发，了解服务器和服务端代码的运行机制也很必要。本主题提供了一个服务器端原理概述，以及构建服务器端应用的 2 份教程，分别使用了 Django（Python）和 Express（node.js）2 个流行框架。

## 获取代码示例

学习区的所有代码示例都可以在 [Github](https://github.com/roy-tian/learning-area/) 上面找到。如果你想把它们复制到自己的电脑上，最简单的方式是 [下载最新的 master 分支](https://github.com/roy-tian/learning-area/archive/master.zip)。

如果希望使用自动更新等更灵活的功能，可以按以下步骤进行：

1. 在电脑上[安装 Git](https://git-scm.com/downloads)，Github 底层使用的版本控制系统。

2. 打开终端（[Windows](https://docs.microsoft.com/zh-cn/windows/terminal/)、[Linux](https://help.ubuntu.com/community/UsingTheTerminal)、[macOS](https://support.apple.com/zh-cn/guide/terminal/welcome/mac)）。

3. 在终端中输入以下命令，即可将 learning-area 仓库拷贝到本地的 learning-area 文件夹：

    ```bash
    git clone https://github.com/roy-tian/learning-area
    ```

4. 然后可以用访达（macOS）、文件资源管理器（Windows/Linux）、[`cd` 命令](https://zh.wikipedia.org/wiki/Cd_(命令))) 进入该目录，查找所需文件。

可以使用以下方法让本地 `learning-area` 与 GitHub 中 master 版本保持一致：

1.  在终端中使用 `cd` 进入 `learning-area` 文件夹。比如，如果当前位于上一层文件夹，则可以：

    ```bash
    cd learning-area
    ```

2. 使用以下命令更新仓库：

    ```bash
    git pull
    ```

## 联系我们

与我们联系交流，最好的方式是通过 [论坛](https://discourse.mozilla.org/c/mdn) 留言。有哪里错误或遗漏，希望看到新的学习主题，对自己不理解的内容求助，还是有其他任何想法，都欢迎你联络我们。

如果你有兴趣帮助我们开发或改进社区内容，请阅读 [如何贡献代码](/zh-CN/docs/MDN/Contribute) 并保持联系！无论您是学生、老师、经验丰富的 Web 开发者，还是想通过帮助我们以提升自我学习经验，我们不胜荣幸！

## 另请参阅

- [Mozilla 开发者新闻通讯](https://www.mozilla.org/zh-CN/newsletter/developer/)
  - : 我们为 Web 开发者编写的新闻报，对各种水平的开发者都很有用。
- [学习 JavaScript](https://learnjavascript.online/)
  - : 有追求的程序员的绝佳选择：提供一个交互环境，通过自动评估来实施简短的教程和交互测试。前 4 节免费，一次小额投入即可获取全套教程。
- [揭开 Web 的面纱](https://www.youtube.com/playlist?list=PLo3w8EB99pqLEopnunz-dOOBJ8t-Wgt2g)
  - : 面向 Web 开发的零基础系列教学视频，[Jérémie Patonnier](https://twitter.com/JeremiePat) 出品。
- [Codecademy](https://www.codecademy.com/)
  - : 很棒的交互式学习网站，帮你从头开始学习编程语言。
- [BitDegree](https://www.bitdegree.org/learn/)
  - : 用游戏的方式学习基础编程理论，关注初学者。
- [Code.org](https://code.org/)
  - : 基本的编程理论和实战，主要面向儿童与完全初学者。
- [EXLskills](https://exlskills.com/learn-en/courses)
  - : 免费和开放的课程，学习技术技能，全程指导、基于项目。
- [freeCodeCamp.org](https://www.freecodecamp.org/)
  - : 使用教程和项目练习，来学习 Web 开发的交互式网站。
- [Web 学习路线图](https://foundation.mozilla.org/en/initiatives/web-literacy/core-curriculum/)
  - : Web 学习与 21 世纪常用技能的入门级框架，另有各类教学活动。
- [Edabit](https://edabit.com/challenges/javascript)
  - : 上千个 JavaScript 交互式编程挑战。