vs code + live server 是零基础学html最稳的入门组合，它通过本地 http 服务（http://127.0.0.1:5500/）替代 file:// 协议，确保 fetch、import、相对路径等后续功能正常，避免新手因协议限制导致的空白页、404、api 报错等问题。
新手写完第一行 <h1>Hello</h1> 就该看到效果，否则三分钟内就会放弃——选错编辑器是零基础学HTML最常踩的坑。
VS Code + Live Server 是当前最稳的入门组合
它不是“功能最多”的编辑器，而是唯一能把“写→存→看”压缩到1秒内的方案。关键不在 VS Code 本身，而在 Live Server 插件提供的本地 HTTP 服务：浏览器走 http://127.0.0.1:5500/ 而不是 file:// 协议，所以后续学 fetch()、import、图片相对路径时不会突然报错崩掉。
实操建议：
- 别装超过3个插件：只要
Live Server、Auto Rename Tag、Emmet就够用，多装反而拖慢启动速度 - 新建文件后，先输
!再按 Tab，自动生成完整 HTML5 结构，别手敲 - 右键打开的是
Open with Live Server，不是Open in Default Browser——后者走 file://，会失效
Brackets 的实时预览看着爽，但只适合前两小时
它的闪电图标一按，Chrome 窗口就同步更新，连保存都不用点。这对建立“我改了，它变了”的正向反馈极有效。但它底层仍是 file:// 协议，一旦你尝试加一行 <script type="module">import './utils.js'</script>，控制台立刻报 Failed to load module script。
使用场景：
- 纯练标签嵌套、CSS 选择器、内联样式时用它，节奏快、无干扰
- 一旦开始引入外部 JS 文件、JSON 数据或想用
console.log调试，必须立刻切回 VS Code + Live Server - 它不支持 Windows 11 新版 Edge 的调试协议，预览窗口偶尔卡死，重启软件比修配置更快
Notepad++ 和双击打开 HTML 文件是新手最大误区
Windows 用户最容易陷入这个循环：Notepad++ 写完 → 双击 index.html → 页面空白 → 查代码没毛病 → 怀疑自己不适合编程。真相是浏览器用 file:// 协议加载时，直接禁掉 XMLHttpRequest、fetch、import、localStorage 等所有 Web API。
常见错误现象：
Access to script at 'file:///C:/project/utils.js' from origin 'null' has been blocked- 控制台空空如也，但页面就是不显示内容（尤其是用了 CSS Flex 或 Grid 时）
- 图片路径写
./assets/logo.png显示 404，换成绝对路径C:\project\assets\logo.png才出来——这根本不是写法问题，是协议限制
在线编辑器（CodePen / StackBlitz）适合验证想法，不适合系统学习
它们开箱即用，不用装任何东西，输入就运行。但它们没有真实文件系统：./data.json 这种相对路径在 CodePen 里毫无意义；StackBlitz 虽然模拟了目录结构，但所有文件都托管在云端，本地改完不能一键部署。
建议这样用：
- 查某个 CSS 属性兼容性？粘贴代码到 CodePen，换浏览器快速测试
- 想跑一个含
fetch('/api')的小 demo？用 StackBlitz，它自动起 dev server - 但别用它们写第一个
index.html——你学不会怎么建文件夹、怎么组织css/和js/子目录，而这恰恰是项目落地的第一步
真正卡住新手的从来不是 HTML 标签怎么写，而是“为什么我明明写对了，却看不到”。协议差异、路径解析、模块加载机制这些底层逻辑，从第一天就藏在编辑器选择里。选 VS Code + Live Server，等于提前绕开了 80% 的隐形门槛。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
