欢迎来到 MDN 学习区。本系列文章旨在为 Web 开发的纯粹初学者提供一切开始编写简单网站所需的知识。

MDN 的这部分内容并不能让您从“新手”变成“专家”,但可以让您对 Web 开发从“一窍不通”到“感觉不错”。这样您就有足够能力自行学习 MDN 的其他部分,也足以学习需要基础知识的中级甚至是进阶资源。

对于纯粹的初学者,Web 开发可能有些挑战性——我们会提供足够详细的资料来帮助您轻松愉快地学习相关主题。无论您是正在学习 Web 开发的学生(自学或者参与课程),寻找课堂材料的老师,还是编程爱好者,抑或仅仅想对 Web 技术有更多了解,您都能找到您所需要的信息。

重要:学习区的内容会定期添加。如果您希望学习区纳入您感兴趣的主题,或者您感觉某些内容遗漏,请到下方 联系我们 获得可以联系我们的方式。

从哪里开始?

  • 完全初学者如果您是完全的 Web 初学者,我们建议您首先通读 Web 入门 模块。这个模块介绍了 Web 开发的实用入门知识。
  • 特定疑问如果您在 Web 开发中遇到问题,那么 常见问题 这个章节或许能对您有所帮助。
  • 基础之上如果您已经具备了一些知识,那么下一步就是详细了解 HTMLCSS 。从 HTML 入门 开始,然后到 CSS 入门
  • 编写脚本如果您已经熟悉 HTML 和 CSS ,或者您主要对写程序感兴趣 ,想进行 JavaScript 或者服务端开发。那么就从 JavaScript 第一步服务端第一步 模块开始了解吧。

注意:您可以在词汇表查询术语定义。

随机术语词条

头等函数
一种编程语言被称为具有头等函数时,语言中的函数将会像任何其他变量一样被对待。例如, 在这样的语言中, 一个函数可以作为参数传递给其他函数,可以被当作返回值被另一个函数返回,可以当作值指定给一个变量。

涵盖的主题

以下是 MDN 学习区涵盖的所有主题列表:

Web入门
为初学者提供一个实用的 Web 开发入门。
HTML — 构建网站
HTML 是我们用来构造网站内容的不同部分并定义它们的意义或目的的语言。本主题详细讲授 HTML。
CSS — 美化网站
我们可以使用 CSS 这个语言来设计和布局我们的 Web 内容,以及添加像动画一类的行为。这个主题提供了详细的 CSS 指导。
JavaScript — 动态客户端脚本语言
JavaScript 是用于向 Web 页面添加动态功能的脚本语言。本主题讲授了编写和理解JavaScript 所需的所有基本要点。
可访问性 — 让网站能被所有人使用
可访问性是将 Web 内容尽可能地提供给尽可能多的人的实践,而不管残疾、设备、地区或其他不同的因素。这个主题给了您所有您需要了解的内容。
工具集与测试
本主题介绍了开发人员用来促进其工作的工具,如跨浏览器测试工具。
服务端网站编程
即使您专注于客户端 Web 开发,了解服务器和服务端代码功能如何工作仍然是有用的。本主题提供服务器以及服务端代码特性如何工作的概述,并详细介绍了如何使用最流行的两个框架—— Django(Python)以及 Express(node.js)建立一个服务端的应用程序。 

获取我们的代码示例

您在学习区看到的所有代码示例都可以在 GitHub 上面找到。如果您想它们复制到您的电脑上,最简单的方式是:

  1. 在您的电脑上 安装 Git。 这是 Github 使用的底层版本控制系统。
  2. 注册一个GitHub账号
  3. 注册成功以后, 用自己的用户名和密码登陆 github.com 。
  4. 打开您电脑中的 命令提示符 (Windows) 或者终端机 (Linux, macOS)。
  5. 复制学习区的储存库到命令提示符/终端机当前目录下一个叫做 learning-area 的文件夹里面,利用如下命令:
    git clone https://github.com/mdn/learning-area
  6. 现在,您就可以进入文件目录,找到您创建的文档(可以用您的文档管理器或者 cd 命令 )。

您可以更新 learning-area 储存库,一旦它在 GitHub 的 master 分支上面有任何更改,用如下命令:

  1. 在您的命令提示符/终端机中, 用 cd 进入到 learning-area 目录内部。例如,您在 learning-area 的父目录里:
    cd learning-area
  2. 利用下面的命令更新储存库:
    git pull

联系我们

如果您想与我们联系交流,最好的方式是通过学习区交流帖或者 IRC 频道留下消息。不论您觉得网站上有哪里错误或遗漏,希望看到新的学习主题,对自己不理解的内容求助,还是有其他任何想法,都欢迎您联络我们。

如果您有兴趣帮助我们开发或改进社区内容,请看一下如何帮助并联系我们。无论您是学生、老师、经验丰富的 Web 开发者,还是想通过帮助我们以提升自我学习经验,我们都欢迎您的参与!

参见

Mozilla 开发者新闻报
我们为 Web 开发者编写的新闻报,对各种水平的开发者都很有用。
Web Demystified
一个由 Jérémie Patonnier 创作的面向 Web 开发的完全新手的系列视频,讲述了 Web 基础。
EXLskills 
免费和开放的课程,学习技术技能,指导和基于项目的学习
Codecademy
很棒的交互式学习网站,帮您从头开始学习编程语言。
Code.org
基本的编程理论和实战,主要面向儿童与完全初学者。
FreeCodeCamp.org
使用教程和项目练习,来学习 Web 开发的交互式网站。
Web Literacy Map
Web 素养与21世纪常用技能的入门级框架,同时提供分门别类的教学活动。
Mozilla 教学活动
由 Mozilla 基金会创建的一系列教学与学习活动,介绍了基本 Web 素养、隐私权、JavaScript、如何捣鼓 Minecraft 等等。
Edabit
不同编程语言的上百个免费交互式编程挑战。