教程

面向学习 Web 的纯新手

Web 入门

Web 入门是一套简明的，介绍 Web 开发实践的系列文章。你会安装构建简单网页和发布简单代码所需的工具。

HTML 教程

初级

HTML 简介

这个模块为学习 HTML 奠定了基础，让你熟悉重要的概念和语法，了解如何在文本中应用 HTML，如何创建超链接以及如何使用 HTML 构建网页结构。

MDN 的 HTML 元素参考

完整的 HTML 元素参考以及不同浏览器的兼容性信息。

用 HTML 创建简单的网页

一篇面向初学者的 HTML 指南——解释常见的标签，其中包含 HTML 标签。同时包含一篇带代码示例的分步指南——创建基础的网页。

HTML 挑战

这些挑战会打磨你的 HTML 技巧（例如，应该使用 <h2> 元素还是 <strong> 元素？）——专注有意义的标记。

中级

多媒体和嵌入

这个模块探讨如何使用 HTML 在网页中包含多媒体内容，包括：包含图像的不同方式，以及如何嵌入视频、音频，甚至整个其他网页。

HTML 表格

在网页上以易于理解、无障碍的方式表示表格数据可能是个挑战。这个模块涵盖基本的表格标记，以及更复杂的特性（诸如实现标题和摘要）。

高级

HTML 表单

表单是 Web 中非常重要的一部分——其提供了网站交互所需的很多功能，例如，注册、登录、发送反馈、购买产品，等等。在这个模块中你会学习如何创建客户端表单。

让 HTML 页面加载快的技巧

网页优化能为用户提供一个响应更好的站点，能减少 Web 服务器和互联网连接的加载时间。

CSS 教程

初级

CSS 基础

CSS（层叠样式表）用于为网页添加样式。CSS 基础将带你了解入门所需的内容。这篇文章回答了如下问题：如何把文本变成黑色或者红色？怎么将内容显示到屏幕上的特定位置？怎么用背景图像或者颜色装饰网页？

CSS 第一步

CSS（层叠样式表）用于为网页添加样式，对网页进行布局——例如，修改内容的字体、颜色、大小和间距，将内容分成多列，或添加动画和其它装饰特性。在前往掌握 CSS 基础知识（CSS 的运作方式，CSS 语法是什么样子，在 HTML 中如何使用 CSS 添加样式）的道路上，这个模块是一个很好的开始。

CSS 构建块

这个模块承接 CSS 第一步——这时你已经熟悉 CSS 语言及其语法，有了基本的使用经验，是时候再深入一些。在这个模块中，你会学习层叠和继承、可用的选择器类型、单位、大小、为背景和边框添加样式、调试，以及其它内容。

这篇文章的目的是，在了解诸如为文本添加样式和 CSS 布局等特定领域的知识之前，提供一个能让你编写合格 CSS 的工具集并帮助你理解基本的理论。

选择器

用 CSS 定位 HTML 元素，其中包含带状态的元素。

优先级

通过优先级测验了解浏览器算法在遇到存在冲突的 CSS 声明时会决定将哪个声明应用到元素上。

层叠与继承

层叠、优先级和继承决定了 CSS 会如何应用于 HTML 中，以及如何解决样式声明冲突。

为文本添加样式

这篇文章介绍了为文本添加样式的基础知识，包括：设置字体、加粗、斜体、行间距、字间距、阴影和其它文本特性。在这个模块中，还会学习的内容有：在页面中应用自定义字体、为列表和链接添加样式。

CSS 常见问题

面向初学者的常见问题和回答。

中级

CSS 布局

看到这儿，你已经学习过 CSS 基础知识、如何为文本添加样式、如何为放置内容的盒子添加样式并操纵它。现在，是时候学习参照视口或另一个盒子时如何将盒子放置在正确的位置。必要的前置知识已经具备，此时你可以深入 CSS 布局，学习不同的显示设置、传统的布局方式（使用浮动和定位）、新发明的布局工具（如弹性盒）。

CSS 参考

完整的 CSS 参考，以及火狐和其它浏览器的兼容性信息。

流式网格

设计一种能随着浏览器窗口大小变化而流畅地调整大小的布局，且仍使用排版网格。

CSS 挑战

展示你的 CSS 技巧，看看哪些地方还需要加强练习。

高级

使用 CSS 变换

用 CSS 实现旋转、倾斜、缩放和平移。

CSS 过渡

CSS 过渡提供一种以动画的形式来改变 CSS 属性的方式，而非让改变立即生效。

Canvas 教程

学习如何使用画布元素和脚本绘制图形。

JavaScript 教程

初级

JavaScript 第一步

在第一个 JavaScript 模块中，我们首先回答一些基本问题，例如“什么是 JavaScript？”、“它看起来是什么样的？”和“它能做什么？”，然后带你体验第一次实际编写 JavaScript。之后，我们将详细讨论一些关键的 JavaScript 特性，如变量、字符串、数字和数组。

创建 JavaScript 代码块

在这个模块中，我们将继续涵盖所有 JavaScript 的关键基础特性，重点关注常见的代码块类型，如条件语句、循环、函数和事件。你已经在课程中看到了这些内容，但只是顺便提及——在这里我们将明确讨论它们。

开始学习 JavaScript

JavaScript 是什么、JavaScript 如何帮助你？

Codecademy

在 Codecademy 学习如何编写 JavaScript 很容易。Codecademy 提供了交互界面，你可以和你的朋友一起学。

freeCodeCamp

freeCodeCamp 教授大量的语言和 Web 开发框架。还有对应的论坛、互联网电台和博客。

中级

介绍 JavaScript 对象

在 JavaScript 中，大多数东西都是对象，从 JavaScript 核心特性（如字符串和数组）到构建在 JavaScript 之上的浏览器 API。你甚至可以创建自己的对象，将相关的函数和变量封装起来。如果你想进一步提高对语言的了解并编写更高效的代码，理解 JavaScript 的面向对象特性非常重要，因此我们提供了这个模块来帮助你。在这里，我们将详细教授对象理论和语法，看看如何创建你自己的对象，并解释 JSON 数据是什么以及如何使用它。

客户端 Web API

在为网站或应用程序编写客户端 JavaScript 时，你很快就会开始使用 API——用于操作浏览器和操作系统不同方面的接口，或者甚至是从其他网站或服务获取数据。在这个模块中，我们将探讨 API 是什么，以及如何使用一些你经常遇到的常见 API。

JavaScript 编程精解

中高级 JavaScript 方法论的综合指南。

大话 JavaScript

面向想又快又好地学习 JavaScript 的程序员，也面向想提升技能或寻找特定主题的 JavaScript 程序员。

基本的 JavaScript 设计模式

介绍基本的 JavaScript 设计模式。

JavaScript.info——现代 JavaScript 教程

卷一：语言。卷二：在浏览器中如何使用 JavaScript。

高级

JavaScript 指南

一份全面且经常更新的 JavaScript 指南，面向从初级到高级的学习者。

你不了解 JS

深入 JavaScript 语言核心机制的系列书籍。

JavaScript 花园

JavaScript 中最古怪部分的文档。

探索 ES6

和 ECMAScript 2015 相关的靠谱且有深度的信息。

JavaScript 模式

JavaScript 模式和反模式合集：涵盖函数模式、jQuery 模式、jQuery 插件模式、设计模式、通用模式、字面量和构造函数模式、对象创建模式、代码复用模式、DOM。

浏览器的工作方式

一篇详细的研究文章：内容涵盖不同的现代浏览器、引擎、页面渲染等等。

JavaScript 视频

必看的 JavaScript 视频合集。

扩展开发

Web 扩展

Web 扩展是一种用于开发浏览器附加组件的跨浏览器系统。很大程度上，该系统与谷歌 Chrome 和 Opera 支持的扩展 API 是兼容的。为这些浏览器编写的扩展在大多数情况下仅需一点改动就能在火狐或微软 Edge 上运行。这些 API 与多进程版本的火狐也完全兼容。