应使用本地服务器而非双击打开index.html，因file://协议会限制fetch、xmlhttprequest等api；开发时推荐npx serve等工具，离线分发需内联资源；data:协议适合快速验证。
直接双击打开 index.html 就行，但多数时候会失败
浏览器默认用 file:// 协议加载本地 HTML 文件，这时 fetch、XMLHttpRequest、localStorage（部分场景）、Service Worker 等 API 会因跨域或安全策略被拒。你看到空白页、控制台报 Failed to load Resource: net::ERR_FILE_SYSTEM 或 SecurityError，不是代码写错了，是运行方式不对。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 开发阶段一律用本地服务器，哪怕只是临时起一个 ——
npx serve、python3 -m http.server 8000、VS Code 的 Live Server 插件都行 - 别依赖双击打开，尤其涉及 ajax、jsON 加载、模块导入（
import）时，file://下import会直接报Failed to load module script - 如果必须离线双击运行（比如给客户发单文件），就把所有资源内联：CSS 写进
<style></style>，JS 写进<script></script>，图片转 base64，避免任何外部请求
fetch 在本地 HTML 里总返回空或报错？检查协议和路径
常见错误现象是控制台显示 TypeError: Failed to fetch 或返回 Response {type: "opaque", status: 0}，本质是浏览器拒绝了 file:// 下的跨源请求，哪怕目标是同目录下的 data.json。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 确认请求路径是否为相对路径：
fetch("data.json")正确，fetch("./data.json")也行，但fetch("/data.json")会尝试从根目录找，file://下的根是磁盘根（如C:），必然失败 - 用
response.ok和response.status做判断，别只靠then()；status === 0就代表被协议拦截，不是后端问题 - chrome 最新版对
file://的限制更严，edge 和 firefox 表现略有不同，但都不应依赖它做开发
html5 新特性（localStorage、canvas、audio）在双击下能用吗？
能用，但有边界：纯前端同步 API 如 localStorage、canvas.getContext("2d")、Audio 构造函数在 file:// 下基本正常；但一旦涉及异步加载（比如 audio.src = "sound.mp3" 后调 play()）、权限（navigator.geolocation）、或需要响应头的 API（如 WebAssembly.instantiateStreaming），就会卡住或报错。
实操建议：
立即学习“前端免费学习笔记（深入）”；
-
localStorage可用，但注意不同浏览器对file://的存储隔离策略不同，Chrome 可能每次双击都新建一个独立上下文 -
canvas绘图没问题，但用toDataURL()导出图片时，若画布内容来自跨域图片（哪怕同目录），会触发污染（SecurityError）—— 这和运行协议无关，是 canvas 自身规则 -
audio和video标签能加载本地文件，但自动播放（autoplay）在多数浏览器中被禁用，需用户手势触发
想快速验证一段 HTML5 代码？别配环境，用浏览器开发者工具
不需要建文件、开服务器，打开 Chrome / Edge / safari，按 F12 → 切到 console 标签页，输入 document.body.innerHTML = `<p>Hello</p>` 就能实时看效果；更进一步，用 data:text/html, URL 方式一行启动：
data:text/html,<!DOCTYPE html><html><body><h1>Test</h1><script>console.log("HTML5 OK");</script></body></html>粘贴到地址栏回车即可运行，所有 HTML5 特性（包括 fetch）在此上下文中受限于 data: 协议，但比 file:// 宽松得多，适合快速验证逻辑。
真正容易被忽略的是：很多“HTML5 教程示例”默认假设你在服务器环境下，没写清楚这个前提。一旦你照着抄完发现跑不通，第一反应不该是改代码，而是先换运行方式。