We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

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

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

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

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

从哪开始?

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

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

注意:未来我们计划发布更多的核心学习材料,左侧“高级学习材料”菜单指向 MDN 上的其他学习材料;它们虽然不属于“学习区”,但对于您的学习很有帮助。

随机术语词条

原型编程
原型编程面向对象编程 的一种风格。它的 没有明确的定义,只是通过向其它的类中添加属性和方法来得到它,甚至偶尔使用空对象来创建类。

涵盖的主题

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

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

获取我们的代码示例

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

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

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

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

联系我们

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

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

另见

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