学习 Web 开发

欢迎来到 MDN 学习区。本系列文章旨在为零基础 Web 开发初学者提供指导和开始编写网站代码所需的所有内容。

该教程并不是“从入门到精通”类型的教程，只能让你做到“从入门到适应”。在此之后，你应该能够以你自己的方式学习 MDN 的其他内容，并接触到其他中、高级资源。

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

想要成为一名前端工程师？

我们汇总了一门课程，其中包含你实现成为前端工程师目标所需要的所有基本信息。

点击开始

学习起点

零基础的初学者: 如果你完全没有 Web 开发经验，那么我们推荐从 Web 入门部分开始，该部分教程通过实践的方式向你介绍 Web 开发。
有一定基础: 如果你已经具备了一定的开发知识，下一步就是深入学习 HTML 和 CSS。先学习 HTML 入门，再学习 CSS 初步。
学习脚本编写: 如果你已经完成了 HTML 和 CSS 入门课程，或是主要对编写代码感兴趣，可以继续学习 JavaScript 或服务端开发。可通过 JavaScript 初步和服务端编程的第一步开始学习。
框架与工具: 在掌握了原生 HTML、CSS、JavaScript 的要领后，就可以继续学习前端开发工具课程，并考虑开始研究 JavaScript 前端框架，以及网站服务端编程了。

备注： 可在术语表中查询术语。此外，如果你对 Web 开发有具体问题，可以尝试在常见问题寻找答案。

涵盖的主题

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

Web 入门: 为零基础初学者提供实用的 Web 开发入门简介。
HTML 构建网站: HTML 是用于构建网页的内容并定义其含义或目的的语言。该专题将详细讲解 HTML。
CSS 风格化站点: CSS 是用于对网页内容进行设计、布局或添加动画等行为的语言。该专题对 CSS 进行了全面介绍。
JavaScript - 动态客户端脚本语言: JavaScript 是用于向网页添加动态功能的脚本语言。该专题涵盖有关编写和理解 JavaScript 代码所需的所有重点。
Web 表单 - 操作用户数据: Web 表单是用于进行用户交互的强大工具——其常用于收集用户数据和控制用户界面。该专题将对 Web 表单的结构、样式、交互要点进行介绍。
无障碍 - 让每个人都能畅游网络: “无障碍”（Accessibility）是开发人员对让更多的人能够不受残疾、设备、地区等因素的限制访问 Web 内容做出的努力。该专题包含一切所需了解的信息。
Web 性能优化 - 让网站更快做出响应: Web 性能是确保网络应用的快速下载并对用户操作进行快速响应的艺术，而无论用户的带宽大小、屏幕尺寸、网络状态好坏或是设备性能高低。
工具与测试: 该专题涵盖了开发人员常用的效率工具，如跨浏览器测试工具、代码检查工具、代码格式化工具、转换工具、版本控制系统、部署工具、客户端 JavaScript 框架等。
服务器端网站编程: 即使你专注于客户端的 Web 开发，了解服务器和服务端代码的运行机制仍然很有用。该专题简单介绍了服务端的运作机制，并包含了两份分别有关使用 Django（Python）和 Express（node.js）两个流行框架构建服务器端应用的教程。

获取代码示例

学习区的所有代码示例都可以在 GitHub 上的 MDN 学习区示例中文版上寻得。如果你想把获取所有代码示例的副本，直接包含最新 master 分支内容的压缩文件即可。

如果你希望以更灵活的方式复制代码仓库并随时更新本地副本，可参考以下更复杂的步骤：

在电脑上安装 Github 底层使用的版本控制系统 Git。
打开操作系统的命令提示符（Windows）或终端（Linux、macOS）。
在命令提示符 / 终端中输入以下命令，即可将 roy-tian/learning-area 仓库拷贝到本地的 learning-area 文件夹：
bash
```
git clone https://github.com/roy-tian/learning-area
```
然后即可使用访达（macOS）、文件资源管理器（Windows/Linux）或 cd 命令) 进入该目录，查找所需文件。

你可以随时对本地 learning-area 目录与 GitHub 仓库中的 master 分支进行同步，具体步骤如下：

在命令提示符 / 终端中使用 cd 指令进入 learning-area 文件夹。例如，当你在父目录时：
bash
```
cd learning-area
```
执行以下命令以更新仓库：
bash
```
git pull
```

联系我们

如果你想就任何事宜联系我们，最好的方式是在论坛上留言。如果你认为网站上有任何错误或遗漏、请求新的学习主题、针对你不理解的部分请求帮助、或提出任何其他问题，我们都期待听到你的意见。

如果你有兴趣帮助我们开发或改进社区内容，请阅读如何做出贡献部分并联系我们！无论你是学生、老师、经验丰富的 Web 开发者、还是其他有兴趣通过帮助我们以提升自学经验的人，我们都不胜荣幸！

参见

Mozilla 开发者新闻通讯: 我们为 Web 开发者编写的新闻报，对各水平开发者而言都是优秀的资源。
学习 JavaScript: 为有进取心的 Web 开发人员准备的优秀资源——在互动环境中学习 JavaScript，其包含由自动评估系统提供指引的简短的课程和互动测试。前 40 节课为免费课程，而想要购买完整的付费课程只需一次性支付少量费用。
揭开 Web 的面纱: 面向 Web 开发的零基础教学视频系列，由 Jérémie Patonnier 出品。
Codecademy: 用于从零学习编程语言的优秀交互式网站。
BitDegree: 用游戏的方式学习基础编程理论。主要针对初学者。
Code.org: 基本的编程理论和实践，主要针对儿童与完全的初学者。
EXLskills: 免费开放的学习技术技能的课程，由导师指导和基于项目的学习。
freeCodeCamp.org: 用于学习 Web 开发的交互式网站，带有教程和项目。
Web 学习路线图: 用于学习入门级 Web 开发素养与新时代常用技能，另分门别类地提供教学活动。
Edabit: 上千个 JavaScript 交互式编程挑战。