学习 Web 开发

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

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

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

想成为一名前端工程师?

我们汇总了一门课程,其中包含你实现目标所需要的所有基本信息。

点击开始

从哪里开始?

零基础的初学者

如果你完全没有 Web 开发背景,那么我们推荐从 Web 入门 部分开始,它采用了实践的方式向你介绍 Web 开发。

提高阶段

如果你具备了一定的开发知识,下一步就是深入学习 HTMLCSS。先学习 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 表单的结构、样式、交互的要点进行介绍。

可访问性 - 让每个人都能畅游网络

开发人员努力让更多的人访问 Web 内容,而不受残疾、设备、地区等因素的限制,我们称之为“可访问性”(Accessibility)。本主题提供所需了解的内容。

Web 性能优化 - 让网站更快做出响应

Web 性能是确保网络应用快速下载并对用户操作快速响应的艺术,无论用户的带宽、屏幕尺寸、网络或是设备性能。

工具和测试

本专题涵盖了开发人员常用的效率工具,如跨浏览器测试工具、代码检查工具、代码格式化工具、转换工具、版本控制系统、部署工具、客户端 JavaScript 框架等。

服务器端网站编程

即使你专注于客户端的 Web 开发,了解服务器和服务端代码的运行机制仍然很有用。本主题提供了服务器端如何运作的简单介绍,以及构建服务器端应用的 2 份教程,分别使用了 Django(Python)和 Express(node.js)2 个流行框架。

获取代码示例

学习区的所有代码示例都可以在 Github 上面找到。如果你想把它们复制到自己的电脑上,最简单的方式是 下载最新的 master 分支

如果你希望以更灵活的方式复制 repo 以允许自动更新,可以按以下步骤进行:

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

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

  1. 在终端中使用 cd 进入 learning-area 文件夹。比如,如果当前位于上一层文件夹,则可以:
    cd learning-area
    
  2. 使用以下命令更新仓库:
    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 学习与 21 世纪常用技能的入门级框架,另有各类教学活动。

Edabit

上千个 JavaScript 交互式编程挑战。