安装基础软件
在本文中，我们将讨论进行简单 Web 开发所需的软件，以及现在需要安装的软件，包括代码编辑器和一些现代 Web 浏览器。
| 预备知识 | 熟悉你的计算机操作系统 (OS)。 |
|---|---|
| 学习成果 |
|
代码编辑器
一个好的代码编辑器是任何开发人员在其机器上最重要的工具之一。除了作为编写代码的地方之外，代码编辑器还拥有许多其他功能。我们将在本系列的后续文章中专门讨论代码编辑器。
目前，我们建议你安装 Visual Studio Code，因为它可以在不同平台上使用，具有出色的功能集和支持，并且是我们主要使用的编辑器。你应该现在安装它以继续阅读本文的其余部分。
现代 Web 浏览器
拥有现代 Web 浏览器对于 Web 开发至关重要，这样你就可以在访问者用来访问你的网站或应用程序的浏览器上测试你的网站或应用程序。你还需要保持你的 Web 浏览器最新，以便它们支持最新的 Web 技术并应用最新的安全修复程序。
你将遇到的最常见的浏览器如下：
- 桌面浏览器
- Chromium: Google Chrome, Opera, Brave, Microsoft Edge, Vivaldi。
- Gecko: Mozilla Firefox。
- WebKit: Apple Safari。
- 移动/替代设备浏览器
- Chromium (Android): Google Chrome, Opera, Brave, Microsoft Edge, Samsung Internet, Vivaldi。
- Gecko (Android): Mozilla Firefox。
- WebKit (iOS): Apple Safari。
注意：上面列出的大多数 Android 浏览器都有 iOS 版本，但由于 Apple 的 App Store 规则，这些浏览器在底层历史上都由 Apple 的 WebKit 引擎提供支持。在撰写本文时，由于监管变化，浏览器开始创建基于其自己的渲染引擎的 iOS 浏览器版本。请参阅 Apple 终于允许完整版本的 Chrome 和 Firefox 在 iPhone 上运行。
大多数现代浏览器倾向于自动安装更新，并在重新启动时应用更改。你通常可以在浏览器“关于”页面上检查更新。这在不同的浏览器和操作系统上有所不同，例如：
- Firefox：在 macOS 上可在 Firefox > 关于 Firefox 中找到，在 Windows 上可在菜单图标 > 帮助 > 关于 Firefox 中找到。
- Chrome：在 macOS 上可在 Chrome > 关于 Google Chrome 中找到，在 Windows 上可在菜单图标 > 帮助 > 关于 Google Chrome 中找到。
要安装哪些浏览器
目前，你应该安装几个桌面和移动/替代设备浏览器来测试你的代码。如果可能，请从前面显示的每个子弹中至少安装一个浏览器，这样你就不会只在基于相同渲染引擎的多个浏览器中进行测试。
本地 Web 服务器
通常，当你在浏览器中输入网址以加载网站时，浏览器用于渲染该站点的文件是从世界其他地方的服务器计算机上托管的远程 Web 服务器获取的。你将在本系列的下一篇文章中了解更多关于其工作原理的信息。
在本地（在你的机器上）创建网站时，你通常可以直接在浏览器中加载主 HTML 索引文件进行测试。但是，有些示例需要通过本地安装的 Web 服务器才能成功运行。
安装本地 Web 服务器
我们发现最简单的本地服务器选项之一是使用代码编辑器扩展——这样，它就可以直接在你的代码编辑器中使用。在 Visual Studio Code 中执行以下操作：
- 使用 视图 > 扩展 菜单选项打开 扩展 面板。
- 在此面板顶部的“搜索...”框中，键入“live preview”。顶部搜索结果应该是 Microsoft 创建的 Live Preview 扩展。
- 单击该选项以打开一个包含其使用方法的页面。
- 按 安装 按钮安装扩展。
- 现在，当你在编辑器中处理 HTML 文件时，你应该能够单击“显示预览”按钮，在单独的选项卡中打开实时示例。
上述选项很简单，但灵活性不高。将来，你可能希望拥有一个更灵活的本地服务器选项，可用于在任何浏览器中加载示例。有关其他选项（以及有关本地服务器为何必要的更多背景信息），请参阅 如何设置本地测试服务器？。
图形编辑器
Web 开发人员通常需要操作图像文件，以便在其创建的网站上使用。这通常意味着设计/创建图形资源，但同样，图形通常由图形设计师（这可能是团队成员或第三方）提供，在这种情况下，Web 开发人员可能需要裁剪或调整他们收到的文件的大小。
MDN 上的任何学习文章都不要求你创建自己的图形，尽管其中一些文章可能要求你操作我们提供的文件。
我们建议你在学习过程中需要时再安装图形编辑器。当然，不要花钱购买昂贵的商业产品，除非你真的认为它会增加价值。
现在有许多免费的软件工具和在线服务可能足够好，例如：
- macOS 带有一个名为 预览 的工具。这主要用于查看图像和 PDF，但它也有一些非常有用的图像编辑功能，包括调整大小、旋转、裁剪、注释以及在不同文件类型之间转换。
- 内置的 Windows 照片应用程序 具有许多类似的功能。
- tinypng 网站提供免费服务，允许你压缩 PNG、JPEG 等。这是你在准备网站资源时必须完成的一项非常常见的任务。
在商业产品方面，Adobe Photoshop 长期以来一直是行业标准，尤其适用于照片编辑，而像 Sketch 这样的程序更适合图标和 UI 工作。还有一些流行的新产品，如 Figma、Affinity Suite 和 Canva。
上述大多数应用程序都有值得探索的试用版或免费模式。还有一些备受推崇的免费应用程序，如 GIMP、Adobe Express 和 Paint.NET。
版本控制工具
版本控制工具由开发人员用于管理服务器上的文件，与团队协作项目，共享代码和资产，并避免编辑冲突。目前，Git 是最流行的版本控制系统，以及 GitHub 或 GitLab 等托管服务。
虽然版本控制工具对于 Web 开发团队至关重要，但你现在无需担心它们。在本系列核心模块的末尾，我们有一个专门针对版本控制的模块。
站点部署应用程序
完成网站或应用程序开发后（在你的本地计算机上，或可能在开发服务器上），你会希望将其放到远程 Web 服务器上，以便你的用户可以输入与其关联的网址并在 Web 上查看它！
你可以通过各种方式完成此操作，从购买托管并使用 SFTP 应用程序，使用 GitHub Pages 或 Netlify 等服务，甚至使用 CodePen 或 JSFiddle 等工具快速制作演示以与他人分享。
如此多的选择可能令人不知所措，但不用担心——你现在无需了解任何关于发布网站的知识。我们将在课程的后面多次讨论这个话题。你很快就会在我们的 你的第一个网站 模块中获得实践经验。