Web 开发教程 - MDN Web Docs

面向完全的初学者

使用 HTML 构建内容结构: 我们的 HTML 入门学习模块从基础开始教授 HTML — 无需任何先验知识。它为您打下基础，让您熟悉重要的概念和语法，了解如何将 HTML 应用于文本，如何创建超链接，以及如何使用 HTML 构建网页结构。
面向初学者的 HTML: 面向初学者的 HTML 指南，包括对常见标签（包括 HTML 标签）的解释。还包括一个逐步指南，介绍如何使用代码示例创建基本网页。
HTML 挑战: 使用这些挑战来磨练您的 HTML 技能（例如，“我应该使用 <h2> 元素还是 <strong> 元素？”），专注于有意义的标记。

Web 表单: 表单是 Web 中非常重要的一部分 — 它们提供了您与网站交互所需的大部分功能，例如注册和登录、发送反馈、购买产品等。此模块将带您入门表单的客户端部分。
编写快速加载 HTML 页面的技巧: 优化网页，为访问者提供更具响应性的网站，并减少 Web 服务器和互联网连接的负载。

CSS 基础: CSS（层叠样式表）是您用于为网页设置样式的代码。CSS 基础 将带您了解入门所需的一切。我们将回答诸如：如何将文本设置为黑色或红色？如何将内容显示在屏幕上的特定位置？如何用背景图像和颜色装饰我的网页？
CSS 样式基础: CSS（层叠样式表）用于设置网页的样式和布局 — 例如，更改内容的字体、颜色、大小和间距，将其分成多列，或添加动画和其他装饰性功能。本模块通过 CSS 工作原理、语法外观以及如何开始使用 CSS 为 HTML 添加样式等基础知识，为您走向 CSS 精通之路提供了一个温和的开端。
选择器: 使用 CSS 定位 HTML 元素，包括基于元素状态的定位。
优先级: 理解浏览器算法，该算法用于确定在存在冲突声明时哪些 CSS 声明被应用于元素，并附带一个特异度测验。
处理冲突: 层叠、特异度和继承控制着 CSS 如何应用于 HTML 以及如何解决样式声明之间的冲突。
CSS 文本样式: 在这里，我们将探讨文本样式基础知识，包括设置字体、粗细、斜体、行间距和字间距，以及阴影和其他文本功能。模块最后，我们将探讨如何将自定义字体应用于您的页面，以及如何设置列表和链接的样式。
解决常见的 CSS 问题: 初学者常见问题解答。

CSS 布局: 此时，我们已经学习了 CSS 基础知识、文本样式设置以及内容容器（盒子）的样式设置和操作。现在是时候了解如何将这些盒子相对于视口和彼此进行正确放置了。我们已经涵盖了必要的先决条件，现在可以深入研究 CSS 布局，探讨不同的显示设置、涉及浮动和定位的传统布局方法，以及像 flexbox 这样的新型布局工具。
CSS 参考: CSS 完全参考，包含 Firefox 和其他浏览器支持的详细信息。
响应式网格: 设计能够随着浏览器窗口流体缩放的布局，同时仍使用排版网格。
CSS 挑战: 锻炼您的 CSS 技能，看看您还需要在哪里加强练习。

使用 JavaScript 进行动态脚本编写: 在此模块中，我们将继续介绍 JavaScript 的所有关键基础特性，重点关注常见的代码块类型，如条件语句、循环、函数和事件。您已经在课程中遇到过这些内容，但只是略过 — 在这里我们将详细讨论它们。
JavaScript 入门: 什么是 JavaScript，它如何帮助您？
Codecademy: Codecademy 是学习 JavaScript 编码的便捷方式。它具有交互性，您可以与朋友一起学习。
freeCodeCamp: freeCodeCamp 教授各种 Web 开发语言和框架。它还有一个论坛、一个互联网广播电台和一个博客。

JavaScript 对象入门: 在 JavaScript 中，大多数事物都是对象，从字符串和数组等核心 JavaScript 功能到构建在 JavaScript 之上的浏览器 API。您甚至可以创建自己的对象，将相关函数和变量封装到高效的包中。如果您想深入了解该语言的知识并编写更高效的代码，理解 JavaScript 的面向对象性质非常重要，因此我们提供了此模块来帮助您。在这里，我们将详细讲解对象理论和语法，探讨如何创建自己的对象，并解释 JSON 数据是什么以及如何处理它。
客户端 Web API: 在为网站或应用程序编写客户端 JavaScript 时，您很快就会开始使用 API — 用于操作浏览器和运行网站的操作系统不同方面，甚至是从其他网站或服务获取数据的接口。在此模块中，我们将探讨 API 是什么，以及如何在开发工作中经常遇到的常用 API。
Eloquent JavaScript: 面向中级和高级 JavaScript 方法的综合指南。
Speaking JavaScript: 面向希望快速、正确地学习 JavaScript 的程序员，以及希望深化技能和/或查找特定主题的 JavaScript 程序员。
JavaScript 核心设计模式: JavaScript 核心设计模式简介。
JavaScript.info - 现代 JavaScript 教程: 第一部分：语言。第二部分：与浏览器交互。

JavaScript 指南: 一份全面的、定期更新的 JavaScript 指南，涵盖从初学者到高级的所有学习级别。
You Don't Know JS: 一系列深入探讨 JavaScript 语言核心机制的书籍。
JavaScript 花园: 关于 JavaScript 中最奇特部分的文档。
探索 ES6: 关于 ECMAScript 2015 的可靠且深入的信息。
JavaScript 模式: JavaScript 模式和反模式集合，涵盖函数模式、jQuery 模式、jQuery 插件模式、设计模式、通用模式、字面量和构造函数模式、对象创建模式、代码重用模式、DOM。
浏览器工作原理: 一篇详细的研究文章，描述了不同的现代浏览器、它们的引擎、页面渲染等。
JavaScript 视频: JavaScript 视频集。

WebExtensions: WebExtensions 是一个用于开发浏览器插件的跨浏览器系统。该系统在很大程度上兼容 Google Chrome 和 Opera 支持的扩展 API。为这些浏览器编写的扩展在大多数情况下都可以在 Firefox 或 Microsoft Edge 中运行，只需做少量修改。该 API 也完全兼容多进程 Firefox。

此页面最后修改于 2025 年 4 月 23 日，由 MDN 贡献者。