HTML 开发环境搭建

HTML开发环境 本质上就是一套用于编写、保存和查看 HTML 代码的工具集合。如果没有正确配置这些基础工具，你将很难把 HTML 的理论知识转化为实践。

本章将指引你选择并安装 HTML 开发环境的两个核心组件：一个用于编写代码的文本编辑器和一个用于查看结果的网页浏览器。

从一开始就搞定这些，能确保你的学习体验顺畅无阻，让你能立即着手试验 HTML 代码。

1. HTML 开发环境

对于 HTML 而言，两个主要的组件是：

• 文本编辑器 (Text Editor)： 这是你编写所有 HTML 代码的地方。虽然从技术上讲，任何基础的文本编辑器（如 Windows 上的记事本或 macOS 上的文本编辑）都能用，但专业的代码编辑器提供了能显著提升效率的功能，让编码更容易，也更不容易出错。它们提供语法高亮（给代码不同部分上色以提高可读性）、自动补全以及许多其他有用的功能。
• 网页浏览器 (Web Browser)： 写完 HTML 代码后，你需要一种方式来看看它长什么样。网页浏览器（如 Chrome, Firefox, Edge, 或 Safari）会解读你的 HTML 文件并将其视觉化渲染，把你的代码转换成你在屏幕上看到的网页。这也是全世界在线查看网站的方式。

这两个工具的组合形成了一个完整的闭环：你在编辑器中编写代码，保存文件，然后在浏览器中打开该文件以查看结果。

2. 必备工具：文本编辑器和网页浏览器

2.1 选择并安装你的文本编辑器

虽然有很多优秀的文本编辑器可供选择，但我们强烈推荐 Visual Studio Code (VS Code)。

它是由微软开发的一款免费、开源且极受欢迎的代码编辑器，被各编程语言的专业开发者广泛使用。其丰富的功能集、庞大的扩展生态系统以及持续的更新，使其成为初学者和专家的理想选择。

2.2 为什么选择 VS Code？

• 语法高亮 (Syntax Highlighting)：自动给 HTML 代码的不同部分（标签、属性、文本）上色，使其更易阅读和理解。
• 智能感知 (IntelliSense/Autocompletion)：在你输入时提示 HTML 标签和属性，加快开发速度并减少拼写错误。
• 集成终端 (Integrated Terminal)：允许你直接在编辑器内运行命令。（这是进阶功能，但了解一下对未来有好处）。
• 扩展插件 (Extensions)：拥有巨大的插件市场，可以添加新功能、支持其他语言以及集成开发工具。虽然起步阶段我们不会重度依赖它，但这在未来是一笔强大的资产。
• 跨平台 (Cross-Platform)：支持 Windows, macOS, 和 Linux。

2.3 VS Code 安装步骤

1. 下载 VS Code： 打开浏览器，访问 Visual Studio Code 官方网站：https://code.visualstudio.com/
2. 选择你的操作系统： 网站通常会自动检测你的操作系统并提供合适的下载。点击那个大大的 "Download for [你的操作系统]" 按钮。
3. 运行安装程序：
• Windows：下载 .exe 文件后，双击开始安装。接受许可协议，点击“下一步”通过默认选项。务必勾选 "Add 'Open with Code' action to Windows Explorer file context menu"（将“通过 Code 打开”操作添加到 Windows 资源管理器文件上下文菜单）和目录上下文菜单这两个选项。这对以后直接在 VS Code 中打开文件和文件夹非常方便。你也可以勾选“创建桌面图标”。点击“安装”然后“完成”。
• macOS：下载 .zip 文件后，双击解压应用程序。将 "Visual Studio Code" 应用程序图标拖入你的 "Applications"（应用程序）文件夹。之后你可以从那里或启动台（Launchpad）启动它。
• Linux：根据你的发行版，下载 .deb (Debian/Ubuntu) 或 .rpm (Fedora/RHEL) 包。双击下载的包或按照你发行版的具体说明安装软件包。
4. 启动 VS Code：安装完成后，从你的应用程序/程序菜单或桌面快捷方式打开 Visual Studio Code。你将会看到一个欢迎界面。
5. 安装汉化包：VS Code 安装汉化包非常简单，主要通过内置的扩展市场安装 "Chinese (Simplified) (简体中文) Language Pack" 扩展。打开 VS Code，点击左侧边栏的扩展图标 (或按下 Ctrl+Shift+X)，在搜索框输入“chinese”，找到并点击 Microsoft 发布的简体中文包 的 "Install" 按钮，安装后在右下角提示中点击 "Restart" 重启软件即可。

3. 选择并验证你的网页浏览器

现代网页浏览器是查看 HTML 页面必不可少的工具。

3.1 推荐的浏览器

• Google Chrome：非常流行，拥有出色的开发者工具，对 Web 标准支持良好。
• Mozilla Firefox：另一个强有力的竞争者，注重隐私，拥有强大的开发者工具。
• Microsoft Edge：基于与 Chrome 相同的 Chromium 引擎构建，提供相似的性能和开发者工具。
• Apple Safari：macOS 和 iOS 的默认浏览器，如果你计划面向 Apple 用户开发，它对测试很重要。

对于本课程，上述任何一款现代浏览器都能完美工作。如果你还没有这些广泛使用的浏览器，我们推荐安装 Google Chrome 或 Mozilla Firefox。

3.2 安装步骤（如果需要）：

• Google Chrome：访问  https://www.google.com/chrome/  并点击 "Download Chrome"。
• Mozilla Firefox：访问  https://www.mozilla.org/firefox/new/ 并点击 "Download Firefox"。

遵循安装提示：两款浏览器的下载过程都很直观，与安装其他应用程序类似。

3.3 验证你的浏览器

为了确保你的浏览器工作正常，并熟悉如何打开本地文件，请按照以下步骤操作：

1. 创建一个新文件夹：在你的桌面或文档文件夹中，新建一个文件夹并命名为 html-basics。这将是你本课程的工作区。
2. 创建一个简单的文本文件：
• 打开刚安装的 VS Code。
• 点击 File > New Text File（文件 > 新建文本文件），或按快捷键 Cmd+N (Mac) / Ctrl+N (Windows/Linux)。
• 输入一条简单的消息，例如：Hello, Begindev.com（暂时先别担心具体的 HTML 标签）。
• 点击 File > Save As...（文件 > 另存为...），或按快捷键 Cmd+S / Ctrl+S。
• 选择你刚刚创建的 html-basics 文件夹。
• 将文件命名为 first-page.html，并确保“保存类型”（或 Mac 上的“格式”）设置为“所有文件”或“纯文本”，以确保它不会自动添加 .txt 后缀。.html 后缀至关重要！
3. 在浏览器中打开：
• 使用电脑的文件资源管理器（macOS 上的 Finder，Windows 上的文件资源管理器）选择 html-basics 文件夹。
• 找到 first-page.html 文件。
• 右键点击 first-page.html 并选择“打开方式”（Windows）或“打开方式”（macOS）。
• 从列表中选择你偏好的网页浏览器（例如 Chrome, Firefox）。
• 你的浏览器应该会打开并以纯文本显示 "Hello, Begindev.com"。你还会注意到浏览器地址栏中的路径以 file:/// 开头，这表明它是一个本地文件。

4. VS Code 插件

进行 HTML/CSS 开发，我们推荐下列基本的插件以提高你的开发学习效率：

1. Live Server (Ritwick Dey): 实时在浏览器查看项目改动，保存自动刷新。
2. Auto Close Tag (Jun Han): 自动补全HTML闭合标签。
3. Auto Rename Tag (Jun Han): 自动重命名HTML标签，修改开始标签，结束标签自动同步。
4. Prettier - Code formatter (Prettier): 统一代码风格，保持HTML/CSS/JS代码整洁漂亮。