直接双击或拖入浏览器打不开HTML文件，主因是file://协议受现代浏览器安全策略限制，导致fetch、import等API被拦截；应改用本地HTTP服务（如Live Server或python3 -m http.server）以http://localhost访问。
直接双击或拖进浏览器打不开，大概率不是代码写错了，而是运行环境卡在了安全策略或路径解析上。本地 HTML 文件用 file:// 协议打开时，现代浏览器（Chrome、Edge、Firefox）会默认阻止 fetch、import、XMLHttpRequest 甚至部分 src 加载——这不是 bug，是设计如此。
为什么在线编辑器里粘贴代码也空白？
很多“在线 HTML 运行”工具（比如某些博客嵌入的 editor、简易 codepen 替代品）其实不真正支持 JS 模块、异步资源或相对路径引用。它们只做字符串渲染，不启动 HTTP 上下文。
- 现象：
<script type="module">import {foo} from './utils.js'</script>在线编辑器里完全没反应，控制台也无报错——因为模块导入必须在http://或https://下才能解析 - 现象：粘贴含
<img src="data/logo.png">的代码，图片不显示，Network 面板里压根没发请求——在线编辑器没挂载真实文件系统，data/目录根本不存在 - 验证方式：把代码复制到 JSFiddle 或 CodePen，它们自带沙箱和资源托管，比“粘贴即跑”的轻量编辑器靠谱得多
本地写完 HTML，扔进在线平台却 404
所谓“在线运行”，分两种：一种是真服务（如 Replit、Glitch），一种是伪运行（仅渲染 DOM 字符串）。你遇到的 404，基本都出在后者对路径的误判上。
-
href="css/style.css"在本地双击能加载，但粘进某在线工具后报 404 —— 因为该工具没提供css/子目录，它只认根目录下的单文件 - 解决办法：把外部 CSS/JS 内联进 HTML，用
<style>和<script>标签包裹内容；图片改用 base64 或在线图床 URL（如https://via.placeholder.com/200） - 避坑提示：别信“支持相对路径”的宣传语——先看它文档是否明确写了 “supports multi-file projects”，没写就默认不支持
用 Live Server 还是 python3 -m http.server？
二者都能起本地 HTTP 服务，但行为差异直接影响调试效率。别只图“能打开”，要看它能不能反映真实部署场景。
立即学习“前端免费学习笔记（深入）”；
-
python3 -m http.server 8000：零依赖，Python 自带，但不支持 SPA 路由 fallback（/user/123会 404），也不压缩资源，适合纯静态页 - VS Code 的
Live Server插件：自动刷新 + 支持.html后缀省略（http://localhost:5500/about可匹配about.html），但默认禁用跨域请求，调 API 时仍可能报 CORS - 关键区别：Live Server 默认加了
Content-Type: text/html;charset=UTF-8响应头；而http.server对.js文件返回text/plain，可能导致 ES 模块解析失败——此时需手动加<meta charset="UTF-8">或换用npx serve
控制台报 Uncaught SyntaxError: Unexpected token ' 怎么办
这是最典型的“路径错配”信号：浏览器本想加载 JS，结果服务器返回了 HTML（通常是 404 页面），JS 解析器看到 <!DOCTYPE 就懵了。
- 复现条件：
<script src="js/app.js"></script>，但实际js/app.js文件不存在，或路径应为./src/js/app.js - 定位方法：F12 → Network → 刷新 → 找状态码为 404 的 JS 请求 → 点开看 Preview，如果显示的是完整 HTML 页面（含
<html>），说明路径指向了 index.html 本身 - 速修方案：把
src改成绝对路径/js/app.js，并确认服务器根目录下真有该文件；或改用./js/app.js并确保 HTML 文件与js/同级
真正卡住人的从来不是语法，而是协议、路径、响应头这三者之间微妙的耦合。哪怕一个 . 写成 ..，或一个 / 漏掉，都可能让整个页面静默失效——别急着重写代码，先看 Network 面板里哪个请求没走通。
