学习网页开发

欢迎来到 MDN 学习区域。这套文章旨在为网页开发的完全初学者提供构建网站的基本技能。我们的目标不是将你从“初学者”变成“专家”，而是将你从“初学者”变成“舒适”。从那里，你应该能够开始你的学习之旅，从MDN 的其他部分以及其他假设有大量先前知识的中级到高级资源中学习。

如果你是一个完全的初学者，网页开发可能具有挑战性——我们将引导你，并提供足够的细节，让你感到舒适并正确地学习主题。无论你是学习网页开发的学生（自学或作为课程的一部分）、寻找课程材料的教师、业余爱好者，还是仅仅想要更多地了解网页技术如何工作的人，你都应该感到宾至如归。

从哪里开始

如果你不确定是否要深入学习网页开发，并且想先进行一个体验课程，我们建议你从我们的网页入门指南开始。除此之外，你应该从学习以下主题开始

HTML 和 CSS: HTML 为网页内容提供结构，而 CSS 提供样式化和布局该内容的指令。请参阅HTML 简介和CSS 入门以获取必要的入门信息。
JavaScript: JavaScript 允许你在网站上编写交互式功能。从JavaScript 入门开始。
框架和工具: 掌握了原生 HTML、CSS 和 JavaScript 的基础知识后，你应该了解客户端网页开发工具，然后考虑深入研究客户端 JavaScript 框架。你还应该考虑学习服务器端网站编程的基本概念。

注意：我们的词汇表提供了术语定义。此外，如果你对网页开发有任何具体问题，我们的常见问题部分可能会有帮助。

想成为前端网页开发人员？

如果你想成为前端网页开发人员并且不确定首先学习什么，我们建议你使用MDN 课程来计划你的学习。它提供了一个结构化的学习路径，涵盖成为成功的前端开发人员必备的技能和实践，以及推荐的学习资源。

开始学习

涵盖的主题

以下是我们在 MDN 学习区域中涵盖的所有主题的列表。

网页入门

为完全初学者提供网页开发的实用入门。

HTML — 网页结构

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

CSS — 网页样式

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

JavaScript — 动态客户端脚本

JavaScript 是一种用于为网页添加动态功能的脚本语言。本主题教授成为舒适地编写和理解 JavaScript 所需的所有基本知识。

网页表单 — 处理用户数据

Web 表单是与用户交互的强大工具——最常见的是，它们用于收集用户数据，或允许用户控制用户界面。在下面列出的文章中，我们将介绍构建、样式设置和与 Web 表单交互的所有基本方面。

无障碍性——让每个人都能使用网络

无障碍性是指使 Web 内容尽可能多的人能够访问的实践，无论其残疾、设备、地区或其他差异因素如何。本主题为您提供了所有必要的知识。

Web 性能——使网站快速且响应迅速

Web 性能是指确保 Web 应用程序快速下载并对用户交互做出响应的艺术，无论用户的带宽、屏幕尺寸、网络或设备功能如何。

MathML

MathML 是一种语言，我们可以使用它来在网页中编写数学公式，包括分数、上标、下标、根式、矩阵、积分、级数等。本主题涵盖 MathML。

工具和测试

本主题涵盖开发人员用于促进其工作的工具，例如跨浏览器测试工具、代码检查工具、代码格式化工具、转换工具、版本控制系统、部署工具和客户端 JavaScript 框架。

服务器端网站编程

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

任务和评估

在 MDN 的“学习 Web 开发”部分，有许多独立的任务和评估供您完成。它们主要分为两种类型

“测试您的技能”任务，例如在在代码中做出决策——条件语句中。
一些模块末尾更深入的**评估**，例如图片库。

每个任务都有一个相关的评分指南和推荐的解决方案，以帮助您评估您的工作。有一些模式可以更容易地找到这些资源，例如

上面链接的**测试您的技能**任务的评分指南和资源可在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中。

获取我们的代码示例

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

如果您希望以更灵活的方式复制仓库，以便自动更新，您可以按照更复杂的说明操作

在您的机器上安装 Git。这是 GitHub 所依赖的底层版本控制系统软件。
打开计算机的命令提示符（Windows）或终端(Linux，macOS)。
要将学习区域仓库复制到当前命令提示符/终端指向位置的名为 learning-area 的文件夹中，请使用以下命令
bash
```
git clone https://github.com/mdn/learning-area
```
您现在可以进入目录并找到您需要的文件（使用 Finder/文件资源管理器或cd 命令）。

您可以使用以下步骤更新 learning-area 存储库中 GitHub 主版本中所做的任何更改

在命令提示符/终端中，使用 cd 进入 learning-area 目录。例如，如果您在父目录中
bash
```
cd learning-area
```
使用以下命令更新存储库
bash
```
git pull
```

联系我们

如果您想与我们联系任何事宜，请使用沟通渠道。我们希望收到您关于您认为网站上任何错误或缺失内容的反馈、对新学习主题的请求、对您不理解的项目的帮助请求，或任何其他问题或疑虑。

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

另请参阅

前端开发人员职业路径 ^{MDN 课程合作伙伴}: Scrimba 的前端开发人员职业路径教授成为一名合格的前端 Web 开发人员所需的所有知识，包括有趣的互动课程和挑战、知识渊博的教师和一个支持性的社区。从零开始，获得您的第一份前端工作！许多课程组件都可以作为独立的免费版本使用。
学习 JavaScript: 一个针对有抱负的 Web 开发人员的优秀资源——在交互式环境中学习 JavaScript，包括简短的课程和交互式测试，并由自动化评估指导。前 40 节课是免费的，完整课程只需支付少量的一次性费用即可获得。
Codecademy: 一个很棒的交互式网站，用于从头开始学习编程语言。
freeCodeCamp.org: 一个交互式网站，提供教程和项目以学习 Web 开发。
The Odin Project: 提供一个免费且开源的全栈课程，从初学者到高级水平。
MDN 博客: MDN 博客包含来自 MDN 团队和客座作者的文章，内容涉及网站的新发展、HTML、CSS、JavaScript 和其他 Web 开发新闻。
Mozilla 开发人员通讯: 我们为 Web 开发人员提供的通讯，是所有经验水平的优秀资源。