blob: c202de9ee834d74441b093d9291e41fa7c028a83 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
|
---
title: 学习 Web 开发
slug: learn
tags:
- CSS
- HTML
- Web
- 交互式网站
- 初学者
- 前端
- 启程
- 学习
- 学习Web开发
- 索引
- 网站
translation_of: Learn
---
{{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 交互式编程挑战。
|
