学习 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 表单的结构、样式、交互要点进行介绍。

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

“可访问性”(Accessibility)是开发人员对让更多的人能够不受残疾、设备、地区等因素的限制访问 Web 内容做出的努力。该专题包含一切所需了解的信息。

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

Web 性能是确保网络应用的快速下载并对用户操作进行快速响应的艺术,而无论用户的带宽大小、屏幕尺寸、网络状态好坏或是设备性能高低。

工具与测试

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

服务器端网站编程

即使你专注于客户端的 Web 开发,了解服务器和服务端代码的运行机制仍然很有用。该专题简单介绍了服务端的运作机制,并包含了两份分别有关使用 Django(Python)和 Express(node.js)两个流行框架构建服务器端应用的教程。

获取代码示例

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

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

  1. 在电脑上安装 Github 底层使用的版本控制系统 Git
  2. 打开操作系统的命令提示符(Windows)或终端(LinuxmacOS)。
  3. 在命令提示符 / 终端中输入以下命令,即可将 roy-tian/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 开发素养与新时代常用技能,另分门别类地提供教学活动。

Edabit

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