HTML 编程开发环境
与许多需要复杂编译和环境配置的编程语言不同，HTML 的开发环境非常简单。本质上，你只需要两样东西：
- 一个代码编辑器（我们在上一章已经讨论过）。
- 一个网页浏览器。
网页浏览器是你用来查看和测试 HTML 页面的主要工具。所有现代浏览器都内置了强大的开发者工具，可以帮助你调试和理解代码。
1. 网页浏览器
你可以使用任何你喜欢的浏览器，但对于开发，我们推荐使用以下几款，因为它们提供了优秀的开发者工具：
- Google Chrome: 目前市场份额最高的浏览器，其 DevTools 功能非常全面和强大。
- Mozilla Firefox: 一款优秀的开源浏览器，其开发者工具在某些方面（如 CSS 布局调试）非常有特色。
- Microsoft Edge: 基于 Chromium（与 Chrome 相同的内核）构建，提供了与 Chrome 类似的开发体验。
2. 如何查看你的 HTML 文件
最简单的方式是直接在浏览器中打开你的 HTML 文件。
- 在你的代码编辑器中，创建一个名为
index.html的文件。 - 将以下基本 HTML 代码粘贴进去并保存：html
<!DOCTYPE html> <html> <head> <title>我的第一个网页</title> </head> <body> <h1>你好，世界！</h1> <p>这是一个段落。</p> </body> </html> - 在你的文件管理器中找到这个
index.html文件。 - 双击它，或者右键点击并选择“打开方式”，然后选择你喜欢的浏览器。
你的浏览器现在应该会显示一个标题为“你好，世界！”的页面。
3. 浏览器开发者工具 (DevTools)
开发者工具是内嵌在浏览器中的一套功能，是 Web 开发者的瑞士军刀。你可以通过以下方式打开它：
- 在页面上右键点击，选择“检查” (Inspect)。
- 按下键盘上的
F12键 (或在 Mac 上是Cmd+Option+I)。
核心面板简介
Elements (元素) 面板: 这是你查看和操作 HTML 与 CSS 的地方。你可以看到浏览器如何渲染你的 HTML 代码，实时修改 HTML 结构和 CSS 样式，并立即看到效果。这对于调试布局和样式问题至关重要。
Console (控制台) 面板: 主要用于 JavaScript 调试。它会显示代码中的错误信息、警告，你也可以在这里运行 JavaScript 命令。
4. 使用本地开发服务器 (推荐)
直接从文件系统打开 HTML 文件 (file:///...) 有一些限制，比如某些 JavaScript API（如 fetch）可能无法正常工作。因此，一个更好的做法是使用一个本地开发服务器。
这听起来可能很复杂，但实际上非常简单。如果你正在使用 VS Code，我们强烈推荐安装 Live Server 插件。
- 安装: 在 VS Code 的扩展市场搜索
Live Server并点击安装。 - 使用: 安装后，在你的 HTML 文件上右键点击，选择“Open with Live Server”。
Live Server 会做两件很棒的事：
- 它会在你的电脑上启动一个本地服务器，并通过一个本地地址（如
http://127.0.0.1:5500）来提供你的文件，模拟了真实的网站环境。 - 当你保存对 HTML、CSS 或 JavaScript 文件的修改时，它会自动刷新浏览器页面，让你立即看到更改，这被称为实时重载 (Live Reload)。
这个工作流程极大地提升了开发效率，是现代 Web 开发的标准实践。