双击打开HTML文件仅适用于纯静态页面；涉及fetch、XMLHttpRequest、Service Worker等功能时必须用本地服务器运行。推荐Python的http.server或VS Code的Live Server插件，线上平台如CodePen、StackBlitz适合分享但不支持后端逻辑。
直接双击打开 .html 文件就能本地运行，不需要服务器；但涉及 fetch、XMLHttpRequest、localStorage（部分浏览器限制）、Service Worker 等功能时，必须用本地服务器启动，否则会失败。
双击打开：适合纯静态页面，但有严格限制
这是最快速的预览方式，适用于只有 HTML + CSS + 同源 JS（无网络请求、无跨域、不读写本地文件）的页面。
- Chrome / Edge 在
file://协议下默认禁用fetch和XMLHttpRequest对本地文件的请求（报错net::ERR_FILE_NOT_FOUND或Access to script at 'file:///...' from origin 'null' has been blocked） - Firefox 相对宽松，但
Service Worker仍要求http://或https://协议 -
localStorage和sessionStorage在file://下多数浏览器会启用，但每次双击新窗口可能视为不同源，导致数据不共享
本地起服务：推荐用 Python 或 Node.js 快速启动
只要项目含任何异步加载、API 调用、模块导入（import）、或需保持状态，就必须走 http://localhost。
- Python 3 自带
http.server：终端进入项目根目录，运行python -m http.server 8000
，然后访问http://localhost:8000/your-page.html - Node.js 用户可全局安装
serve：npm install -g serve
，再运行serve -s . -p 3000
（-s表示单页应用模式，适合 React/Vue 路由） - VS Code 安装插件
Live Server，右键 HTML 文件 → “Open with Live Server”，自动唤起浏览器并监听文件变化
在线运行：适合分享、协作或快速验证
这些平台不运行你的真实服务器，而是把 HTML/CSS/JS 三块代码拼合成一个沙盒页面，本质仍是静态托管 —— 所以不能跑后端逻辑，也不能访问本地文件或真实 API（除非 CORS 允许）。
立即学习“前端免费学习笔记（深入）”；
-
JSFiddle：支持分栏编辑，但需手动设置
<script>标签位置，外部库要填 CDN 地址 -
CodePen：实时预览友好，但免费账户私有项目不可见，且
fetch到非 HTTPS 接口会被拦截 -
StackBlitz：支持完整 Webpack 构建流程，能跑 Vite/React/Vue 项目，甚至模拟
node-fetch，但上传大文件或复杂依赖会卡顿
常见报错与对应解法
看到这些错误，基本可以判定是协议或路径问题，不是代码写错了：
-
Failed to load resource: net::ERR_FILE_NOT_FOUND→ 说明用了fetch('./data.json')但双击打开，改用本地服务器 -
Access to fetch at 'file:///...' has been blocked→ 同上，浏览器安全策略阻止file://下的 fetch -
Uncaught SyntaxError: Cannot use import statement outside a module→ HTML 中没加type="module"，或本地服务器没配 MIME 类型（Pythonhttp.server默认支持，不用额外处理） -
404 Not Found（在本地服务器中）→ 检查路径是否相对于服务根目录，比如http://localhost:8000/启动，那么./assets/style.css要确保assets/style.css文件真正在当前目录下
真正容易被忽略的是：很多教程里写的“打开 HTML 就行”，只适用于最简 demo；一旦加一行 fetch('/api') 或 import { foo } from './utils.js'，就必须切到本地服务器——这个切换点，比想象中来得早。
