path: root/files/zh-cn/learn/index.html

---
title: 学习 Web 开发
slug: learn
tags:
  - CSS
  - HTML
  - Web
  - 交互式网站
  - 初学者
  - 前端
  - 启程
  - 学习
  - 学习Web开发
  - 索引
  - 网站
translation_of: Learn
---
<div>{{LearnSidebar}}</div>

<p>您好！</p>

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

<p>本学习区的目标，不在于让您从“菜鸟”到“专家”，而在于带领您从“入门”到“适应”。这样您就有能力自行学习 <a href="/zh-CN/">MDN 的其他部分</a>，也具备足够多的基础知识，去学习中级甚至是进阶资源。</p>

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

<div class="warning">
<p><strong>重要</strong>：学习区的内容会定期添加。如果您希望学习区纳入您感兴趣的主题，或者您感觉某些内容遗漏，请到下方 {{anch("联系我们")}} 获得可以联系我们的方式。</p>
</div>

<h2 id="从哪里开始？">从哪里开始？</h2>

<ul class="card-grid">
 <li><span>完全初学者</span>如果您是完全的 Web 初学者，我们建议您首先通读 <a href="/zh-CN/Learn/Getting_started_with_the_web">Web 入门</a> 模块。这个模块介绍了 Web 开发的实用入门知识。</li>
 <li><span>特定疑问</span>如果您在 Web 开发中遇到问题，那么 <a href="/zh-CN/docs/Learn/Common_questions">常见问题</a> 这个章节或许能对您有所帮助。</li>
 <li><span>基础之上</span>如果您已经具备了一些知识，那么下一步就是详细了解 {{glossary("HTML")}} 和 {{glossary("CSS")}} 。从 <a href="/zh-CN/docs/Learn/HTML/Introduction_to_HTML">HTML 入门</a> 开始，然后到 <a href="/zh-CN/docs/Learn/CSS/Introduction_to_CSS">CSS 入门</a>。</li>
 <li><span>编写脚本</span>如果您已经熟悉 HTML 和 CSS ，或者您主要对写程序感兴趣 ，想进行 {{glossary("JavaScript")}} 或者服务端开发。那么就从 <a href="/zh-CN/docs/Learn/JavaScript/First_steps">JavaScript 第一步</a> 或 <a href="/zh-CN/docs/Learn/Server-side/First_steps">服务端第一步</a> 模块开始了解吧。</li>
</ul>

<div class="note">
<p><strong>注意</strong>：您可以在<a href="/zh-CN/docs/Glossary">词汇表</a>查询术语定义。</p>
</div>

<p>{{LearnBox({"title":"随机术语词条"})}}</p>

<h2 id="涵盖的主题">涵盖的主题</h2>

<p>以下是 MDN 学习区涵盖的所有主题列表：</p>

<dl>
 <dt><a href="https://developer.mozilla.org/zh-CN/docs/Learn/Getting_started_with_the_web">Web入门</a></dt>
 <dd>为初学者提供一个实用的 Web 开发入门。</dd>
 <dt><a href="https://developer.mozilla.org/zh-CN/docs/Learn/HTML">HTML — 构建网站</a></dt>
 <dd>HTML 是我们用来构造网站内容的不同部分并定义它们的意义或目的的语言。本主题详细讲授 HTML。</dd>
 <dt><a href="https://developer.mozilla.org/zh-CN/docs/Learn/CSS">CSS — 美化网站</a></dt>
 <dd>我们可以使用 CSS 这个语言来设计和布局我们的 Web 内容，以及添加像动画一类的行为。这个主题提供了详细的 CSS 指导。</dd>
 <dt><a href="https://developer.mozilla.org/zh-CN/docs/Learn/JavaScript">JavaScript — 动态客户端脚本语言</a></dt>
 <dd>JavaScript 是用于向 Web 页面添加动态功能的脚本语言。本主题讲授了编写和理解JavaScript 所需的所有基本要点。</dd>
 <dt><a href="https://developer.mozilla.org/zh-CN/docs/Learn/Accessibility">可访问性 — 让网站能被所有人使用</a></dt>
 <dd>可访问性是将 Web 内容尽可能地提供给尽可能多的人的实践，而不管残疾、设备、地区或其他不同的因素。这个主题给了您所有您需要了解的内容。</dd>
 <dt><a href="https://developer.mozilla.org/zh-CN/docs/Learn/Performance">Web 表现 — 让网站又快又具备响应能力</a></dt>
 <dd>Web 表现是保证 Web 应用下载迅速且能对用户交互作出反应的艺术，用户的带宽、屏幕尺寸、网络、设备性能，都不应该是实现这两件事的阻碍。</dd>
 <dt><a href="https://developer.mozilla.org/zh-CN/docs/Learn/Tools_and_testing">工具集与测试</a></dt>
 <dd>本主题介绍了开发人员用来促进其工作的工具，如跨浏览器测试工具、代码错误检查工具、代码格式化工具、转换工具、版本控制系统、开发工具。</dd>
 <dt><a href="https://developer.mozilla.org/zh-CN/docs/Learn/Server-side">服务端网站编程</a></dt>
 <dd>即使您专注于客户端 Web 开发，了解服务器和服务端代码功能如何工作仍然是有用的。本主题提供服务器以及服务端代码特性如何工作的概述，并详细介绍了如何使用最流行的两个框架—— Django（Python）以及 Express（node.js）建立一个服务端的应用程序。</dd>
</dl>

<h2 id="获取我们的代码示例">获取我们的代码示例</h2>

<p>学习区的所有代码示例都可以在 <a href="https://github.com/roy-tian/learning-area/">GitHub</a> 上面找到。如果您想它们复制到您的电脑上，最简单的方式是 <a href="https://github.com/roy-tian/learning-area/archive/master.zip">下载最新的 master 分支</a>。</p>

<p>如果希望使用自动更新等更灵活的功能，可以按以下步骤进行：</p>

<ol>
 <li>在电脑上 <a href="https://git-scm.com/downloads">安装 Git</a>。 Github 底层使用的版本控制系统。</li>
 <li>打开电脑的 <a href="https://www.lifewire.com/how-to-open-command-prompt-2618089">命令提示符</a> （Windows） 或终端 （<a href="https://help.ubuntu.com/community/UsingTheTerminal">Linux</a>, <a href="http://blog.teamtreehouse.com/introduction-to-the-mac-os-x-command-line">macOS</a>）。</li>
 <li>在命令提示符/终端中输入以下命令，即可复制学习区仓库到当前目录下的 learning-area 目录里：
  <pre class="brush: bash">git clone https://github.com/roy-tian/learning-area
</pre>
 </li>
 <li>现在就可以用访达（macOS）、文件管理器（Windows）或 <a href="https://en.wikipedia.org/wiki/Cd_(command)">cd 命令</a> 进入该目录，寻找所需文件了。</li>
</ol>

<p>现在如果 GitHub 上 <code>learning-area</code> 仓库的 master 分支有任何更改，都用以下命令更新自己的仓库：</p>

<ol>
 <li>在命令提示符/终端中，用 <code>cd</code> 命令进入到 <code>learning-area</code> 目录。如果当前目录是 <code>learning-area</code> 的父目录，就可以：

  <pre class="brush: bash">cd learning-area
</pre>
 </li>
 <li>使用以下命令更新仓库：
  <pre class="brush: bash">git pull</pre>
 </li>
</ol>

<h2 id="联系我们">联系我们</h2>

<p>如果您想与我们联系交流，最好的方式是通过<a href="https://discourse.mozilla-community.org/t/learning-web-development-marking-guides-and-questions/16294">学习区交流帖</a>或者 <a href="/zh-CN/docs/MDN/Community/Conversations#Chat_in_IRC">IRC 频道</a>留下消息。不论您觉得网站上有哪里错误或遗漏，希望看到新的学习主题，对自己不理解的内容求助，还是有其他任何想法，都欢迎您联络我们。</p>

<p>如果您有兴趣帮助我们开发或改进社区内容，请看一下<a href="/zh-CN/Learn/How_to_contribute">如何帮助</a>并联系我们。无论您是学生、老师、经验丰富的 Web 开发者，还是想通过帮助我们以提升自我学习经验，我们都欢迎您的参与！</p>

<h2 id="参见">参见</h2>

<dl>
 <dt><a href="https://www.mozilla.org/zh-CN/newsletter/developer/">Mozilla 开发者新闻报</a></dt>
 <dd>我们为 Web 开发者编写的新闻报，对各种水平的开发者都很有用。</dd>
 <dt><a href="https://www.youtube.com/playlist?list=PLo3w8EB99pqLEopnunz-dOOBJ8t-Wgt2g">Web Demystified</a></dt>
 <dd>一个由 <a href="https://twitter.com/JeremiePat">Jérémie Patonnier</a> 创作的面向 Web 开发的完全新手的系列视频，讲述了 Web 基础。</dd>
 <dt><a href="https://exlskills.com/learn-en/courses">EXLskills</a></dt>
 <dd>免费和开放的课程，学习技术技能，指导和基于项目的学习</dd>
 <dt><a href="https://www.codecademy.com/">Codecademy</a></dt>
 <dd>很棒的交互式学习网站，帮您从头开始学习编程语言。</dd>
 <dt><a href="https://code.org/">Code.org</a></dt>
 <dd>基本的编程理论和实战，主要面向儿童与完全初学者。</dd>
 <dt><a href="https://www.freecodecamp.org/">FreeCodeCamp.org</a></dt>
 <dd>使用教程和项目练习，来学习 Web 开发的交互式网站。</dd>
 <dt><a href="https://learning.mozilla.org/web-literacy/">Web Literacy Map</a></dt>
 <dd>Web 素养与21世纪常用技能的入门级框架，同时提供分门别类的教学活动。</dd>
 <dt><a href="https://learning.mozilla.org/activities">Mozilla 教学活动</a></dt>
 <dd>由 Mozilla 基金会创建的一系列教学与学习活动，介绍了基本 Web 素养、隐私权、JavaScript、如何捣鼓 Minecraft 等等。</dd>
 <dt><a href="https://edabit.com/">Edabit</a></dt>
 <dd>不同编程语言的上百个免费交互式编程挑战。</dd>
</dl>