VS Code 是当前写 HTML 最不踩坑的选择，因其插件生态和默认行为对 HTML 友好，推荐搭配 Live Server 插件、关闭自动保存，并规范文件组织与路径写法。
用什么编辑器写 HTML 最不踩坑
vs code 是当前最省心的选择，不是因为它多高级，而是插件生态和默认行为对 html 友好得恰到好处。其他编辑器要么保存时乱加 bom，要么实时预览要装一堆扩展还经常不同步。
-
Live Server插件必须装——它起的是本地http://localhost:5500服务，而不是直接双击打开file://协议，后者会导致 AJAX、fetch、模块导入全失败 - 关掉
files.autoSave设为off，不然频繁保存可能打断正在调试的 JS 断点或网络请求状态 - 别用记事本、TextEdit 或微信内置浏览器“查看源码”来改 HTML——它们会偷偷转编码、删空格、吞换行，改完发现样式全崩是常态
HTML 文件怎么组织才不会后期改疯
新手常把所有东西塞进一个 index.html，结果加个轮播图就要翻 800 行找 <div id="banner">。结构一乱，连 <code>Ctrl+F 都救不了。
- 根目录下固定放
index.html，CSS 放css/style.css，JS 放js/main.js，图片统一进assets/——路径越短越不容易写错../ -
<link rel="stylesheet" href="css/style.css">这种写法依赖相对路径，如果将来用构建工具（如 Vite），就得改成<link rel="stylesheet" href="/css/style.css">（加斜杠开头） - 避免在 HTML 里写内联样式（
style="color:red"）或内联脚本（<script>alert(1)</script>），调试时根本分不清是哪段 JS 触发了 DOM 变化
浏览器开发者工具里哪些面板真有用
很多人只用 Elements 面板点点删删，其实真正定位问题靠的是 Network 和 Console，尤其当页面看起来“没变”但数据就是不加载时。
- 刷新页面后立刻看
Network面板，筛选XHR或Fetch，确认fetch('/api/user')请求是否发出、状态码是不是404或0（后者代表跨域或协议错误） -
Console里出现Uncaught ReferenceError: $ is not defined不代表 jQuery 没加载，可能是<script></script>标签没加defer或位置在 DOM 操作语句前面 -
Elements面板右键某个元素选Break on > attribute modifications，能抓到谁偷偷改了class或style，比瞎猜快得多
本地开发时 HTTP 和 file 协议的区别在哪
双击打开 HTML 文件走的是 file:// 协议，看着能显示，但几乎所有现代 Web 功能都会被浏览器拦住——这不是 bug，是安全策略。
-
fetch('/data.json')在file://下直接报net::ERR_FILE_NOT_FOUND，因为浏览器禁止从本地文件发起网络请求 -
import语法（如import { foo } from './utils.js'）在file://下会触发CORS policy: The request client is not a secure context - 唯一绕开方式是用
Live Server或命令行起服务：npx http-server -c-1（-c-1关缓存，避免改了 CSS 看不到效果）
路径别名、模块导入、API 调用、Service Worker……这些功能全依赖一个真正的 HTTP 环境。没起服务就调试，等于在沙滩上搭城堡。
立即学习“前端免费学习笔记（深入）”；
