---
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 交互式编程挑战。