学习网络开发

¥Where to start

如果你不确定是否要深入学习 Web 开发并希望从品尝课程开始，我们建议你首先阅读我们的 开始使用网络 指南。除此之外，你应该从学习以下主题开始：

¥If you are not sure about committing to learning web development in-depth and want to begin with a taster session, we'd recommend that you start by working through our Getting started with the web guides. Beyond that, you should start by learning the following topics:

HTML 和 CSS

HTML 提供 Web 内容的结构，而 CSS 提供内容样式和布局的指令。请参阅 HTML 简介 和 CSS 第一步 了解基本入门信息。

JavaScript

JavaScript 允许你在网站上编写交互功能代码。从 JavaScript 第一步 开始。

框架和工具

在掌握了普通 HTML、CSS 和 JavaScript 的基础知识后，你应该学习 客户端 Web 开发工具，然后考虑深入研究 客户端 JavaScript 框架。你还应该考虑学习 服务器端网站编程 的基本概念。

注意：我们的 glossary 提供了术语定义。此外，如果你有关于 Web 开发的具体问题，我们的 常见问题 部分可能会为你提供帮助。

¥Note: Our glossary provides terminology definitions. Besides, if you have a specific question about web development, our Common questions section may have something to help you.

¥Topics covered

以下是我们在 MDN 学习字段涵盖的所有主题的列表。

¥The following is a list of all the topics we cover in the MDN learning area.

开始使用网络

为完全的初学者提供 Web 开发的实用介绍。

HTML - 构建网络

HTML 是我们用来构建内容不同部分并定义其含义或目的的语言。本主题详细教授 HTML。

CSS - 设计网页样式

CSS 是我们用来控制网页内容的样式和布局以及添加动画等行为的语言。本主题全面介绍了 CSS。

JavaScript - 动态客户端脚本

JavaScript 是用于向网页添加动态功能的脚本语言。本主题教授熟悉编写和理解 JavaScript 所需的所有基础知识。

Web 表单 — 处理用户数据

Web 表单是与用户交互的有效工具 - 最常见的是，它们用于从用户收集数据，或允许他们控制用户界面。在下面列出的文章中，我们将涵盖构造、样式以及与 Web 表单交互的所有基本方面。

可访问性 - 让每个人都可以使用网络

可访问性是指让尽可能多的人可以访问网络内容，无论残疾、设备、区域设置或其他差异化因素如何。本主题为你提供了你需要了解的所有信息。

Web 性能 — 使网站快速响应

Web 性能是确保 Web 应用快速下载并响应用户交互的艺术，无论用户的带宽、屏幕大小、网络或设备功能如何。

MathML

MathML 是我们可以使用分数、脚本、根式、矩阵、积分、级数等在网页中编写数学公式的语言。本主题涵盖 MathML。

工具和测试

本主题涵盖开发者用来促进其工作的工具，例如跨浏览器测试工具、linter、格式化程序、转换工具、版本控制系统、部署工具和客户端 JavaScript 框架。

服务器端网站编程

即使你专注于客户端 Web 开发，了解服务器和服务器端代码功能的工作原理仍然很有用。本主题提供了服务器端如何工作的一般介绍，以及展示如何使用两个流行框架构建服务器端应用的详细教程：Django (Python) 和 Express (Node.js)。

¥Tasks and assessments

在 MDN 的学习 Web 开发部分，有许多独立的任务和评估供你完成。这些主要有两种类型：

¥In the Learn web development section of MDN, there are many self-contained tasks and assessments for you to complete. These come in two main types:

• "测试你的技能" 任务，例如 在代码中做出决定 - 条件 中的任务。
• 在某些模块（例如 图片库）结束时进行更深入的评估。

每一项都有相关的评分指南和推荐的解决方案，可帮助你评估你的作业。有一些模式可以让你更轻松地找到这些资源，例如：

¥Each one has an associated marking guide and recommended solution available to help you assess your work. There are patterns that make it easier to find these resources, for example:

• 上面链接的测试你的技能任务在 https://github.com/mdn/learning-area/tree/main/javascript/building-blocks/tasks/conditionals 上提供了评分指南和资源。
• 上面链接的评估有评分指南和资源，可在 https://github.com/mdn/learning-area/tree/main/javascript/building-blocks/gallery 获取。

注意：大多数评分指南以及任务和评估的其他资源都可以在 mdn/learning-area 中找到，但也有一些在 mdn/css-examples 中提供。

¥Note: Most of the marking guides and other resources for the tasks and assessments are available in mdn/learning-area, although some are in mdn/css-examples.

¥Getting our code examples

你在学习区中遇到的代码示例都是 可以在 GitHub 上找到。如果你想将它们全部复制到你的计算机上，最简单的方法是 下载最新主代码分支的 ZIP。

¥The code examples you'll encounter in the Learning Area are all available on GitHub. If you want to copy them all to your computer, the easiest way is to download a ZIP of the latest master code branch.

如果你希望以更灵活的方式复制存储库以允许自动更新，则可以按照更复杂的说明进行操作：

¥If you prefer to copy the repo in a more flexible way that allows for automatic updates, you can follow the more complex instructions:

1. 你机器上的 安装 Git。这是 GitHub 运行的底层版本控制系统软件。
2. 打开计算机的 命令提示符 (Windows) 或终端（Linux、苹果系统）。
3. 要将学习区域存储库复制到命令提示符/终端指向的当前位置中名为学习区域的文件夹，请使用以下命令：
   bash

   git clone https://github.com/mdn/learning-area
   

4. 你现在可以进入目录并查找所需的文件（使用 Finder/文件资源管理器或 cd 命令）。

你可以通过以下步骤使用对 GitHub 上主版本所做的任何更改来更新 learning-area 存储库：

¥You can update the learning-area repository with any changes made to the master version on GitHub with the following steps:

1. 在命令提示符/终端中，使用 cd 进入 learning-area 目录。例如，如果你位于父目录中：
   bash

   cd learning-area
   

2. 使用以下命令更新存储库：
   bash

   git pull
   

¥Contact us

如果你想就任何事情与我们联系，请使用 沟通渠道。我们希望收到你认为网站上有任何错误或缺失的信息、对新学习主题的请求、对你不理解的项目的帮助请求，或者任何其他问题或疑虑。

¥If you want to get in touch with us about anything, use the communication channels. We'd like to hear from you about anything you think is wrong or missing on the site, requests for new learning topics, requests for help with items you don't understand, or any other questions or concerns.

如果你有兴趣帮助开发/改进内容，请查看 你可以如何提供帮助 并联系我们！无论你是学习者、教师、经验丰富的 Web 开发者，还是有兴趣帮助改善学习体验的其他人，我们都非常乐意与你交谈。

¥If you're interested in helping develop/improve the content, take a look at how you can help and get in touch! We are more than happy to talk to you, whether you are a learner, teacher, experienced web developer, or someone else interested in helping to improve the learning experience.

¥See also

学习 JavaScript

对于有抱负的 Web 开发者来说是一个极好的资源 — 在交互式环境中学习 JavaScript，通过简短的课程和交互式测试，并以自动评估为指导。前 40 节课程是免费的，完整的课程只需一次性支付少量费用。

代码学院

一个很棒的交互式网站，用于从头开始学习编程语言。

freeCodeCamp.org

交互式网站，包含学习 Web 开发的教程和项目。

奥丁计划

具有免费开源的全栈课程，从初学者到高级。

MDN 博客

MDN 博客包含 MDN 团队和客座作家撰写的有关网站新开发、HTML、CSS、JavaScript 和其他 Web 开发新闻的文章。

Mozilla 开发者通讯

我们为 Web 开发者提供的时事通讯，这是适合各个经验级别的优秀资源。