HTML 编辑器
# HTML 编辑器
对于编写 HTML 文件，推荐使用 VS Code 或 WebStorm 等现代化的代码编辑器。
- VS Code: 下载地址 (opens new window)
- VS Code 安装教程: 参考链接 (opens new window)
这些编辑器提供了强大的代码补全、语法高亮和实时预览功能，使编写和调试 HTML 代码变得更加高效和便捷。
# 1. 新建 HTML 文件
在安装完成 VS Code 后，可以按照以下步骤新建一个 HTML 文件：
- 打开 VS Code，选择菜单栏上的 文件 > 新建文件。
- 在新建的文件中输入以下代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<h1>我的第一个标题</h1>
<p>我的第一个段落。</p>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
# 2. 另存为 HTML 文件
完成代码输入后，将文件另存为 HTML 文件：
- 选择菜单栏上的 文件 > 另存为。
- 在弹出的对话框中，将文件命名为
runoob.html，并选择保存位置（建议选择一个易于记忆的文件夹，如runoob）。
提示: 保存 HTML 文件时，可以使用 .htm 或 .html 扩展名。两者没有功能上的区别，建议统一使用 .html 以保持一致性。
# 3. 在浏览器中运行 HTML 文件
保存文件后，可以在浏览器中查看 HTML 文件的效果：
- 在 VS Code 编辑器中，鼠标右击文件名，选择 在默认浏览器打开（或选择其他安装的浏览器）。
注意: 在 VS Code 中使用浏览器打开 HTML 文件需要安装 "open in browser" 扩展。
# 使用 VS Code 实时预览 HTML 文件
VS Code 可以通过安装 Live Preview 插件来实时预览编写的代码效果：
- 打开 VS Code，进入扩展（Extensions）面板，搜索并安装 Live Preview 插件。
- 安装完成后，在编辑窗口右击鼠标，选择 Show Preview 选项。
- 编辑器右侧将显示实时预览效果：
通过实时预览功能，可以在编写代码的过程中即时查看效果，提高开发效率。
# 总结
- 安装和使用 VS Code: 强大的代码编辑器，适合编写 HTML 文件。
- 新建和保存 HTML 文件: 在 VS Code 中输入代码并保存为
.html文件。 - 在浏览器中查看效果: 通过 VS Code 快捷方式或浏览器直接打开 HTML 文件。
- 实时预览: 安装 VS Code 扩展插件 Live Preview，实时查看编写代码的效果。
通过以上步骤，您可以高效地编写和调试 HTML 文件，快速预览效果，提高开发效率。
编辑此页 (opens new window)
上次更新: 2025/01/25, 22:32:05