直接双击index.html打不开，90%是本地file://协议安全限制所致，非代码错误；应起本地HTTP服务（如Live Server）以http://localhost访问，避开跨域拦截与路径解析问题。
直接双击 index.html 就能运行，但多数新手卡在编码、路径或标签闭合上，不是工具不行，是本地打开时浏览器静默失败了。
双击 HTML 文件打不开？检查这三处硬伤
浏览器直接打开本地 index.html 是最简方式，但常因以下问题白屏或乱码：
-
charset缺失或写错：必须在<head>里加</meta charset="UTF-8">，否则中文变方块或标签被误解析 - 文件扩展名没生效：Windows 下重命名时若没显示扩展名，可能实际保存为
index.html.txt—— 开启“显示文件扩展名”再确认 - 路径含中文或空格：比如桌面路径
C:\用户\张三\我的网页\index.html，某些浏览器会拒绝加载；改用纯英文路径（如C:\web\index.html）立刻解决
Live Server 插件比双击更可靠，尤其涉及 JS/CSS
双击方式本质是 file:// 协议，不支持 fetch、XMLHttpRequest、相对路径的 CSS 背景图等——这些在真实服务器环境都正常。VS Code 的 Live Server 插件起一个本地 http://127.0.0.1:5500 服务，就绕过所有限制：
- 安装插件后，右键 HTML 文件 → “Open with Live Server”，自动打开浏览器并监听文件变化
- 它默认用 UTF-8 服务，不用手动配
charset - 图片、CSS、JS 路径只要写对相对位置（如
./images/logo.png），就能正确加载
在线编辑器适合试代码片段，别拿来存项目
CodePen、JSFiddle 这类工具确实点开即用，但它们有明确边界：
立即学习“前端免费学习笔记（深入）”；
- 适合验证单个功能：比如测
flex布局、调试一段addEventListener逻辑 - 不适合完整项目：无法管理多文件依赖、不能读取本地图片、不支持
localStorage持久化（部分平台禁用） - 导出陷阱：CodePen 的 “Export .zip” 会打包带额外 wrapper 的 HTML，结构和你本地写的不一致；JSFiddle 导出的是无
<!DOCTYPE>的残缺页
为什么你的 HTML 在线运行总报错？大概率是标签没闭合
新手最容易忽略的是 HTML 标签的嵌套与闭合规则，浏览器容错机制会悄悄“修复”，但结果往往和预期相反：
-
<p>第一段<div>第二段</p></div>：实际被解析成<p>第一段</p><div>第二段</div>，因为<p>不允许嵌套<div> -
<img src="a.jpg"><img src="b.jpg">：没问题；但写成<img src="a.jpg"<img src="b.jpg">（少了个>），后面所有标签都会错位 - 检查方法：把代码粘贴进 W3C Markup Validation Service，它会标出第几行哪个标签出问题
真正卡住人的从来不是“怎么运行”，而是运行后页面和代码对不上——这时候别怀疑工具，先看控制台有没有 404，再查源码里有没有漏掉 </ 或多打了 <。
