教程

本页面的链接指向各种教程和培训材料。无论您是刚刚入门、学习基础知识,还是 Web 开发的老手,您都可以在此处找到有用的资源,以了解最佳实践。

这些资源由具有前瞻性思维的公司和 Web 开发人员创建,他们已经接受了 Web 开发的开放标准和最佳实践,并提供或允许翻译,通过开放内容许可证(如知识共享)。

面向 Web 开发的完全初学者

Web 入门

Web 入门是一个简洁的系列,介绍了 Web 开发的实用性。您将设置构建简单网页所需的工具,并发布您自己的简单代码。

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 针对 HTML 元素,包括基于元素状态。

特异性

了解浏览器算法以确定在存在竞争的声明时哪些 CSS 声明将应用于元素,并提供特异性测验

层叠和继承

层叠、特异性和继承控制 CSS 如何应用于 HTML 以及如何解决样式声明之间的冲突。

样式化文本

在这里,我们将介绍文本样式的基础知识,包括设置字体、粗体和斜体、行距和字距,以及阴影和其他文本功能。我们通过查看如何将自定义字体应用于您的页面以及如何设置列表和链接的样式来结束本模块。

常见 CSS 问题

初学者常问的常见问题及其解答。

中级

CSS 布局

到目前为止,我们已经介绍了 CSS 基础知识、如何设置文本样式,以及如何设置和操作内容所在的框。现在是时候看看如何将您的框相对于视窗以及彼此放置在正确的位置。我们已经介绍了必要的先决条件,因此现在可以深入研究 CSS 布局,了解不同的显示设置、涉及浮动和定位的传统布局方法,以及 Flexbox 等新式布局工具。

CSS 参考

CSS 的完整参考,包括 Firefox 和其他浏览器支持的详细信息。

流式网格

设计随浏览器窗口灵活调整大小的布局,同时仍使用排版网格。

CSS 挑战

展现您的 CSS 技能,并查看您需要更多练习的地方。

高级

使用 CSS 变换

使用 CSS 应用旋转、倾斜、缩放和平移。

CSS 过渡

CSS 过渡提供了一种对 CSS 属性更改进行动画处理的方法,而不是使更改立即生效。

Canvas 教程

了解如何使用 canvas 元素使用脚本绘制图形。

JavaScript 教程

入门级

JavaScript 入门

在我们的第一个 JavaScript 模块中,我们首先回答了一些基本问题,例如“什么是 JavaScript?”、“它是什么样子的?”以及“它能做什么?”,然后继续带您体验编写 JavaScript 的第一个实践过程。之后,我们将详细讨论一些关键的 JavaScript 特性,例如变量、字符串、数字和数组。

JavaScript 构建块

在本模块中,我们将继续介绍所有 JavaScript 关键的基本特性,将注意力转向常见的代码块类型,例如条件语句、循环、函数和事件。您已经在课程中看到了这些内容,但只是略过 - 在这里我们将明确地讨论它们。

JavaScript 入门

什么是 JavaScript,它如何帮助您?

Codecademy

Codecademy 是学习 JavaScript 编码的简单方法。它是交互式的,您可以与朋友一起完成。

freeCodeCamp

freeCodeCamp 教授多种 Web 开发语言和框架。它还有一个论坛、一个互联网广播电台和一个博客.

中级

介绍 JavaScript 对象

在 JavaScript 中,大多数东西都是对象,从核心 JavaScript 特性(如字符串和数组)到建立在 JavaScript 之上的浏览器 API。您甚至可以创建自己的对象,将相关的函数和变量封装到高效的包中。如果您想更深入地了解 JavaScript 并编写更高效的代码,那么了解 JavaScript 的面向对象特性非常重要,因此我们提供本模块来帮助您。在这里,我们将详细讲解对象理论和语法,介绍如何创建自己的对象,并解释 JSON 数据是什么以及如何使用它。

客户端 Web API

在为网站或应用程序编写客户端 JavaScript 时,您不会走得太远,就会开始使用 API - 用于操作网站运行的浏览器和操作系统的不同方面,甚至来自其他网站或服务的数据的接口。在本模块中,我们将探讨 API 是什么以及如何使用在开发工作中经常遇到的某些最常见的 API。

Eloquent JavaScript

对中级和高级 JavaScript 方法的全面指南。

Speaking JavaScript

面向想要快速正确学习 JavaScript 的程序员,以及想要加深技能或查找特定主题的 JavaScript 程序员。

Essential JavaScript Design Patterns

对基本 JavaScript 设计模式的介绍。

JavaScript.info - 现代 JavaScript 教程

第一部分:语言。第二部分:使用浏览器。

高级

JavaScript 指南

面向所有学习水平的 JavaScript 综合指南,从初学者到高级。

You Don't Know JS

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

JavaScript Garden

JavaScript 最古怪部分的文档。

探索 ES6

关于 ECMAScript 2015 的可靠而深入的信息。

JavaScript Patterns

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

浏览器的工作原理

一篇详细的研究文章,描述了不同的现代浏览器、它们的引擎、页面渲染等等。

JavaScript 视频

一系列 JavaScript 视频供观看。

扩展开发

Web 扩展

Web 扩展是一个跨浏览器系统,用于开发浏览器插件。在很大程度上,该系统与 Google Chrome 和 Opera 支持的扩展 API兼容。为这些浏览器编写的扩展程序在大多数情况下将在 Firefox 或Microsoft Edge(仅需少量更改)中运行。该 API 还与多进程 Firefox完全兼容。