Learn web development

欢迎来到MDN学习区. 这组文章旨在为Web开发的完整初学者提供开始编写网站所需的全部知识.

MDN领域的目的不是要使您从"初学者"变为"专家",而是要使您从"初学者"变为"舒适". 从那里,您应该能够开始自己的方式,从MDN的其余部分以及其他具有很多先前知识的中级到高级资源中学习.

如果您是一个完整的初学者,则Web开发可能会充满挑战-我们将握住您的手,并为您提供足够的细节,让您感到舒适并正确学习主题. 无论您是学习网络开发的学生(自己或作为班级的一部分),正在寻找课堂资料的老师,业余爱好者,或者只是想了解更多有关网络技术工作原理的人,都应该感到宾至如归.

What's new?

学习区域中的内容会定期添加. 我们已开始保留" 学习区"发行说明,以显示发生了什么变化,请定期检查!

如果您对自己想看的话题有疑问或想丢失,请在我们的Discourse论坛上给我们留言 .

Where to start

  • 完整的初学者:如果您是Web开发的完整初学者,我们建议您首先阅读Web模块入门,该模块为Web开发提供了实用的介绍.
  • 特定问题:如果您对Web开发有特定问题,我们的常见问题部分可能会对您有所帮助.
  • 超越基础知识:如果您已经有了一些知识,那么下一步就是详细学习HTMLCSS :从我们的HTML简介模块开始,然后进入CSS第一步模块.
  • 进行脚本编写:如果您已经熟悉HTML和CSS,或者您主要对编码感兴趣,那么您将继续进行JavaScript或服务器端开发. 从我们的JavaScript第一步服务器端第一步模块开始.

注意 :我们的词汇表提供了术语定义.

随机词汇表条目

ASCII
ASCII美国信息交换标准码 )是计算机用于将字母,数字,标点和控制代码转换为数字形式的最流行的编码方法之一. 自2007年以来, UTF-8在网络上取代了它.

Topics covered

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

Getting started with the web
为完整的初学者提供有关Web开发的实用介绍.
HTML — Structuring the web
HTML是我们用来构造内容的不同部分并定义其含义或目的的语言. 本主题详细讲授HTML.
CSS — Styling the web
CSS是一种语言,我们可以使用它来设置网页内容的样式和布局以及添加动画等行为. 本主题全面介绍CSS.
JavaScript — Dynamic client-side scripting
JavaScript是用于向网页添加动态功能的脚本语言. 本主题讲授了熟悉和编写JavaScript所需的所有基本知识.
Web forms — Collecting data from users
Web表单是与用户进行交互的非常强大的工具-最常见的是,它们用于从用户收集数据或允许他们控制用户界面. 在下面列出的文章中,我们将介绍结构,样式以及与Web表单交互的所有基本方面.
Accessibility — make the web usable by everyone
可访问性是一种使残障人士,设备,语言环境或其他差异性因素使Web内容尽可能多地可供人们使用的实践. 本主题为您提供了所有您需要了解的内容.
Web Performance — making websites fast and responsive
Web性能是确保Web应用程序快速下载并响应用户交互的艺术,无论用户带宽,屏幕大小,网络或设备功能如何.
Tools and testing
本主题涵盖开发人员用来促进其工作的工具,例如跨浏览器测试工具.
Server-side website programming
即使您专注于客户端Web开发,了解服务器和服务器端代码功能的工作方式仍然很有用. 本主题对服务器端的工作方式进行了一般性介绍,并提供了详细的教程,展示了如何使用两个流行的框架(Django(Python)和Express(Node.js))构建服务器端应用程序.

Getting our code examples

您将在学习区中遇到的代码示例都可以在GitHub上找到 . 如果要将它们全部复制到计算机上,最简单的方法是下载最新主代码分支的ZIP .

If you'd rather copy the repo in a more flexible way that allows for automatic updates, you can follow the more complex instructions:

  1. 在您的机器上安装Git . 这是GitHub所基于的底层版本控制系统软件.
  2. Sign up for a GitHub account.
  3. 注册后,使用您的用户名和密码登录github.com .
  4. 打开计算机的命令提示符 (Windows)或终端( LinuxmacOS ).
  5. 要将学习区域存储库复制到命令提示符/终端指向的当前位置的名为"学习区域"的文件夹中,请使用以下命令:
      git clone https://github.com/mdn/learning-area 
  6. 现在,您可以进入目录并找到要查找的文件(使用Finder / File Explorer或cd命令 ).

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

  1. 在命令提示符/终端中,使用cd进入learning-area目录. 例如,如果您在父目录中:
      cd学习区 
  2. 使用以下命令更新存储库:
      git pull 

Contact us

如果您想与我们取得联系,最好的方法是在我们的Discourse论坛上给我们留言. 我们希望收到您关于网站上任何您认为是错误或缺失的内容,新学习主题的请求,关于您不理解的项目的帮助请求或任何其他问题或疑虑的消息.

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

See also

Mozilla developer newsletter
我们为Web开发人员提供的时事通讯,是所有经验水平的宝贵资源.
Web demystified
一系列介绍Web基础知识的视频,专门面向完全的Web开发初学者. 由JérémiePatonnier创建.
Codecademy
一个伟大的交互式站点,可以从头开始学习编程语言.
BitDegree
基本编码理论,具有游戏化的学习过程. 主要针对初学者.
Code.org
基本编码理论和实践,主要针对儿童/初学者.
EXLskills
免费和开放式课程,用于学习技术技能,并提供指导和基于项目的学习.
freeCodeCamp.org
带有教程和项目的交互式站点,用于学习Web开发.
Web literacy map
一种入门级的网络素养和21个世纪技能框架,这也提供了教学活动的机会进行排序按类别.
Teaching activities
Mozilla基金会创建了一系列教学(和学习)教学活动,涵盖了从基本的网络素养和隐私到JavaScript和Minecraft入侵的所有方面.
Edabit
数以千计的交互式JavaScript挑战.