最轻量、最可靠的HTML开发环境是VS Code + Chrome + 本地HTTP服务，需用Live Server插件或python3 -m http.server解决file://协议限制，并严格遵循DOCTYPE声明、UTF-8编码及相对路径规范。
最轻量、最不容易出问题的 HTML 开发环境，就是 VS Code + Chrome + 本地 HTTP 服务。别一上来就装 HBuilderX 或 WebStorm，90% 的人不是卡在写代码，而是卡在插件冲突、路径识别失败、编码乱码、file:// 协议限制这些地方。
为什么双击打开 index.html 经常“不生效”
浏览器对 file:// 协议有严格限制：AJAX、fetch()、localStorage 在部分场景下被禁用，CSS 中的 @import 或字体文件也可能加载失败——这不是你 HTML 写错了，是协议本身不允许。
- 临时解决：运行
python3 -m http.server 8000，然后访问http://localhost:8000/index.html - Windows 没 Python？装 VS Code 的
Live Server插件，右键 HTML 文件点Open with Live Server，自动起服务+热重载 - Mac 用户慎用
TextEdit，默认富文本，保存时会偷偷塞入不可见字符，导致<div> 突然不闭合、<code>class="btn"变成class="btn "（末尾多一个全角空格）VS Code 配置 HTML 开发的最小必要项
不需要装几十个插件。只开这三个，就够用且稳定：
-
Auto Rename Tag：改开标签，自动同步闭标签，避免手动漏删 -
HTML Boilerplate或直接输入!+Tab：生成带和 UTF-8 声明的标准结构 -
Live Server：如上所述，解决 file:// 限制，且支持保存即刷新
关掉所有跟“格式化 HTML”相关的插件（比如
Prettify），除非你真装了 Node.js 并愿意维护它——否则保存时弹报错、卡住、格式错乱，反而拖慢节奏。立即学习“前端免费学习笔记（深入）”；
HBuilderX 适合什么人用
它不是“更高级的 VS Code”，而是“为 HTML5 + uni-app 场景深度优化的工具”。如果你明确要开发跨端小程序或 App，且团队已用 DCloud 生态，那 HBuilderX 的
uni-app一键编译、真机调试、内置发行打包确实省事。- 新手误入坑点：用它建“普通项目”后，发现 Emmet 不触发、
Ctrl+S不自动刷新、右键没“在浏览器中打开”选项——因为它的默认工作流是走自己的运行服务，不是通用浏览器协议 - 必须确认：
工具 → 插件安装 → Emmet已启用；新建文件用右键新建 → HTML文件，别手动建 .txt 改后缀 - 项目目录建议按官方推荐分
src/和dist/，否则后续加构建脚本或对接 CI 时容易混乱
真正关键的不是选哪个编辑器，而是从第一天就坚持用
http://localhost而非file://路径调试，以及所有 HTML 文件第一行必须是、保存为 UTF-8 编码、路径全部用相对路径（<code>./images/logo.png，不用images/logo.png）。这些细节不显眼，但一旦忽略，后面花十倍时间都未必能定位到根因。 -
