diff options
Diffstat (limited to 'files')
| -rw-r--r-- | files/zh-cn/learn/index.md | 231 |
1 files changed, 120 insertions, 111 deletions
diff --git a/files/zh-cn/learn/index.md b/files/zh-cn/learn/index.md index 84aff6a8f7..c202de9ee8 100644 --- a/files/zh-cn/learn/index.md +++ b/files/zh-cn/learn/index.md @@ -15,114 +15,123 @@ tags: - 网站 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> +{{LearnSidebar}} + +欢迎来到 MDN 学习区。本系列文章面对零基础 Web 开发初学者，包含编写简单网站的必备知识。 + +这不是一个“从入门到精通”的教程，只希望你做到“从入门到适应”。打好基础后，你便可以进行 [MDN 的其他内容](/zh-CN/)，并接触到其他中、高级资源。 + +从零开始学习 Web 开发极富挑战性，我们将为你提供详细的资料，手把手帮助你轻松愉快地学习。无论你是正在学习 Web 开发的学生（自学或参与课程）、寻找材料的老师、编程爱好者，亦或仅仅想了解一点点 Web 技术，这里都能找到所需信息。 + +## 有什么新鲜事？ + +学习区内容正在不断更新。记得常来查看！ + +如果你期望添加其他相关主题，请到 [论坛](https://discourse.mozilla.org/c/mdn) 留言。 + +> **标注：** +> +> #### 想成为一名前端工程师？ +> +> 我们为你准备了全套系列教程，希望能助你一臂之力。 +> +> [**点击开始**](/zh-CN/docs/Learn/Front-end_web_developer) + +## 从哪里开始？ + +- 零基础的初学者 + - : 如果你完全没有 Web 开发背景，那么我们推荐通过 [Web 入门](/zh-CN/docs/Learn/Getting_started_with_the_web) 模块来学习，它采用了实践学习的方式帮你入门。 +- 提高阶段 + - : 如果你具备了一定的开发知识，下一步就是深入学习 {{glossary("HTML")}} 和 {{glossary("CSS")}}。先学习 [HTML入门](/zh-CN/docs/Learn/HTML/Introduction_to_HTML)，再学习 [CSS 初步](/zh-CN/docs/Learn/CSS/First_steps)。 +- 学习脚本 + - : 在完成 HTML 和 CSS 入门课程之后，或者你只关心编写代码，可以继续学习 {{glossary("JavaScript")}} 或服务器端开发。可通过[JavaScript 初步](/zh-CN/docs/Learn/JavaScript/First_steps) 和 [服务器端初步](/zh-CN/docs/Learn/Server-side/First_steps) 开始学习。 +- 框架与工具 + - : 在掌握了 HTML、CSS、JavaScript 的主要技能后，可以继续学习 [前端开发工具](/zh-CN/docs/Learn/Tools_and_testing/Understanding_client-side_tools)，并考虑开始研究 [ JavaScript 前端框架](/zh-CN/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks)，以及 [网站服务器端编程](/zh-CN/docs/Learn/Server-side)。 + +> **备注：** 可在 [词汇表](/zh-CN/docs/Glossary) 中查询术语。另外对于日常开发遇到的疑问，可以尝试在 [常见问题](/zh-CN/docs/Learn/Common_questions) 寻找答案。 + +{{LearnBox({"title":"随机术语"})}} + +## 涵盖的主题 + +以下是 MDN 学习区涵盖的所有主题列表： + +- [Web 入门](/zh-CN/docs/Learn/Getting_started_with_the_web) + - : 为零基础的初学者提供一个实用的 Web 开发入门。 +- [HTML 构建网站](/zh-CN/docs/Learn/HTML) + - : 我们用 HTML 来构造网站各部分内容，定义它们的内涵或目的。本主题详细讲解 HTML。 +- [CSS 风格化站点](/zh-CN/docs/Learn/CSS) + - : 可以使用 CSS 语言对 Web 内容进行设计、布局、添加动画等操作。本主题提供了详尽的 CSS 指导。 +- [JavaScript — 动态客户端脚本语言](/zh-CN/docs/Learn/JavaScript) + - : JavaScript 是用于向网页添加动态功能的脚本语言。本主题讲解了编写和理解 JavaScript 所需的所有基础要点。 +- [Web 表单 - 操作用户数据](/zh-CN/docs/Learn/Forms) + - : Web 表单是一种强大的交互工具，通常用于从用户处收集数据，以及为用户提供操作界面。本主题中我们将对 Web 表单的结构、样式、交互的要点进行介绍。 +- [可访问性 - 让每个人都能畅游网络](/zh-CN/docs/Learn/Accessibility) + - : 开发人员努力让更多的人访问 Web 内容，而不受残疾、设备、地区等因素的限制，我们称之为“可访问性”（Accessibility）。本主题提供所需了解的内容。 +- [Web 性能优化 - 让网站更快做出响应](/zh-CN/docs/Learn/Performance) + - : Web 性能优化工作，可在同等带宽、屏幕尺寸、网络条件、设备性能的，带来更快的 Web 应用下载速度和交互响应。 +- [工具和测试](/zh-CN/docs/Learn/Tools_and_testing) + - : 本主题介绍了开发人员常用的效率工具，如跨浏览器测试工具、代码检查工具、代码格式化工具、转换工具、版本控制系统、部署工具、客户端 JavaScript 框架等。 +- [服务器端网站编程](/zh-CN/docs/Learn/Server-side) + - : 即使你专注于前端开发，了解服务器和服务端代码的运行机制也很必要。本主题提供了一个服务器端原理概述，以及构建服务器端应用的 2 份教程，分别使用了 Django（Python）和 Express（node.js）2 个流行框架。 + +## 获取代码示例 + +学习区的所有代码示例都可以在 [Github](https://github.com/roy-tian/learning-area/) 上面找到。如果你想把它们复制到自己的电脑上，最简单的方式是 [下载最新的 master 分支](https://github.com/roy-tian/learning-area/archive/master.zip)。 + +如果希望使用自动更新等更灵活的功能，可以按以下步骤进行： + +1. 在电脑上[安装 Git](https://git-scm.com/downloads)，Github 底层使用的版本控制系统。 + +2. 打开终端（[Windows](https://docs.microsoft.com/zh-cn/windows/terminal/)、[Linux](https://help.ubuntu.com/community/UsingTheTerminal)、[macOS](https://support.apple.com/zh-cn/guide/terminal/welcome/mac)）。 + +3. 在终端中输入以下命令，即可将 learning-area 仓库拷贝到本地的 learning-area 文件夹： + + ```bash + git clone https://github.com/roy-tian/learning-area + ``` + +4. 然后可以用访达（macOS）、文件资源管理器（Windows/Linux）、[`cd` 命令](https://zh.wikipedia.org/wiki/Cd_(命令))) 进入该目录，查找所需文件。 + +可以使用以下方法让本地 `learning-area` 与 GitHub 中 master 版本保持一致： + +1. 在终端中使用 `cd` 进入 `learning-area` 文件夹。比如，如果当前位于上一层文件夹，则可以： + + ```bash + cd learning-area + ``` + +2. 使用以下命令更新仓库： + + ```bash + git pull + ``` + +## 联系我们 + +与我们联系交流，最好的方式是通过 [论坛](https://discourse.mozilla.org/c/mdn) 留言。有哪里错误或遗漏，希望看到新的学习主题，对自己不理解的内容求助，还是有其他任何想法，都欢迎你联络我们。 + +如果你有兴趣帮助我们开发或改进社区内容，请阅读 [如何贡献代码](/zh-CN/docs/MDN/Contribute) 并保持联系！无论您是学生、老师、经验丰富的 Web 开发者，还是想通过帮助我们以提升自我学习经验，我们不胜荣幸！ + +## 另请参阅 + +- [Mozilla 开发者新闻通讯](https://www.mozilla.org/zh-CN/newsletter/developer/) + - : 我们为 Web 开发者编写的新闻报，对各种水平的开发者都很有用。 +- [学习 JavaScript](https://learnjavascript.online/) + - : 有追求的程序员的绝佳选择：提供一个交互环境，通过自动评估来实施简短的教程和交互测试。前 4 节免费，一次小额投入即可获取全套教程。 +- [揭开 Web 的面纱](https://www.youtube.com/playlist?list=PLo3w8EB99pqLEopnunz-dOOBJ8t-Wgt2g) + - : 面向 Web 开发的零基础系列教学视频，[Jérémie Patonnier](https://twitter.com/JeremiePat) 出品。 +- [Codecademy](https://www.codecademy.com/) + - : 很棒的交互式学习网站，帮你从头开始学习编程语言。 +- [BitDegree](https://www.bitdegree.org/learn/) + - : 用游戏的方式学习基础编程理论，关注初学者。 +- [Code.org](https://code.org/) + - : 基本的编程理论和实战，主要面向儿童与完全初学者。 +- [EXLskills](https://exlskills.com/learn-en/courses) + - : 免费和开放的课程，学习技术技能，全程指导、基于项目。 +- [freeCodeCamp.org](https://www.freecodecamp.org/) + - : 使用教程和项目练习，来学习 Web 开发的交互式网站。 +- [Web 学习路线图](https://foundation.mozilla.org/en/initiatives/web-literacy/core-curriculum/) + - : Web 学习与 21 世纪常用技能的入门级框架，另有各类教学活动。 +- [Edabit](https://edabit.com/challenges/javascript) + - : 上千个 JavaScript 交互式编程挑战。 |