最轻量可靠的HTML开发环境是VS Code + Chrome，配本地HTTP服务（如python3 -m http.server或Live Server插件），并严格遵循DOCTYPE声明、UTF-8编码、正确路径书写等基础规范。
用什么工具写 HTML 最不折腾
浏览器加一个文本编辑器，就是最轻量、最可靠的 HTML 开发环境。别一上来就装 IDE 或“前端开发套件”，多数人卡在配置上，不是卡在写代码上。
推荐组合：VS Code（免费、插件少也够用） + Chrome（F12 开发者工具实时看效果）。装完直接新建 index.html，右键用 Chrome 打开，改完 Ctrl+S → Alt+Tab → F5，闭环就完成了。
- 别用
Notepad（Windows 自带记事本），它默认保存为ANSI编码，中文会乱码；VS Code默认UTF-8，安全 - 别用
Word或WPS写 HTML——它们会偷偷插入不可见格式字符，导致<div> 突然不闭合、<code>class值里多出空格 - Mac 用户慎用
TextEdit，除非手动设成“纯文本”模式，否则默认是富文本，保存即埋雷
为什么本地双击打开 HTML 文件有时不生效
因为浏览器对 file:// 协议有限制：AJAX 请求、fetch、部分 localStorage 行为、甚至某些 CSS 模块加载都会被拦截——这不是你代码错，是浏览器策略。
真实开发中，哪怕只改一行样式，也建议起一个最小本地服务。不用 Node.js，不用 Python，一条命令就行：
立即学习“前端免费学习笔记（深入）”；
python3 -m http.server 8000
然后访问 http://localhost:8000/index.html。这个地址走的是 http://，没限制。
- Windows 没装 Python？装个
Live Server插件（VS Code 商店搜这个名字），右键 HTML 文件点 “Open with Live Server”，自动起服务并监听文件变化 - 别手动改浏览器地址栏里的
file:///路径去“模拟服务器”，无效。协议不同，权限模型完全不同 - 如果只是静态展示（比如交作业、发给同事看），双击打开没问题；但只要涉及 JS 交互或后续要加功能，立刻切到本地服务
HTML 文件开头必须写 吗
必须写，而且必须是第一行，前面不能有任何字符（包括空格、BOM、注释）。不写，浏览器会进怪异模式（Quirks Mode），盒模型、字体渲染、JS 的 getBoundingClientRect 行为全可能和预期不一致。
常见翻车现场：
- 编辑器自动生成了 BOM 头（尤其 Windows 上某些编辑器），看着空空如也，实际开头有隐藏字节，
DOCTYPE失效 - 复制别人代码时，把注释
<!-- 注释 -->放在DOCTYPE前面，直接触发怪异模式 - 用构建工具（如 Vite）时，模板里已经内置了
DOCTYPE，自己再手写一遍，变成两个，第一个失效
验证方法：打开开发者工具 → Elements 标签页，看顶部是否显示 Document ；或者运行 <code>document.compatMode，返回 "CSS1Compat" 才对，"BackCompat" 就是掉坑里了。
图片路径写错时浏览器只显示空白，怎么快速定位
不是所有路径错误都报红字错误，很多情况是 <img src="xxx.jpg" alt="HTML开发环境如何搭建基础环境_HTML开发环境搭建基础环境流程【详解】" > 找不到文件，控制台只显示 404，但页面就留个空框，新人常以为是 CSS 或 HTML 结构问题。
关键动作：打开开发者工具 → Network 标签页 → 刷新 → 筛选 Img 类型 → 找状态码是 404 的请求，点开看它的 Request URL，对比你写的路径和实际期望路径。
-
src="images/logo.png"是相对路径，基准是当前 HTML 文件所在目录，不是项目根目录 -
src="/images/logo.png"的/是网站根目录，本地双击打开时，/指向磁盘根（比如C:/），必然 404；只有走http://localhost才有意义 - 路径大小写敏感：Linux/macOS 服务器上，
Logo.png和logo.png是两个文件，本地 Windows 可能不报错，上线就挂
路径这事，没有“差不多”，只有“完全匹配”。浏览器不会猜你想用哪个文件。
