直接用浏览器打开html文件失败是因file://协议限制，需改用http://环境：可用codepen等在线平台，或textastic（ipad）、droidedit+termux（android）启本地服务，同时触摸事件须监听touchstart和click。
直接用浏览器打开 HTML 文件为什么经常失败
不是代码写错了，而是 iPad / Android 平板上用文件管理器点开 .html 文件时，浏览器走的是 file:// 协议。这个协议下：fetch() 会被拦截、localStorage 可能静默失效、外部 css 和 js 文件路径哪怕全对也加载不了——Safari 尤其严格，这是安全策略，不是 bug。
不装软件、不连电脑，纯靠浏览器就能跑起来的方案
绕过 file:// 的唯一办法，是让 HTML 运行在 http:// 或 https:// 下。不用本地服务器也能做到：
- 打开 Safari 或 Chrome，访问
CodePen、JSFiddle、Replit或StackBlitz（iPad 上 StackBlitz Web 版体验最稳） - 新建一个 HTML 项目模板，把你的完整代码（含
结构、<link>、<script></script>）粘贴进去 - 保存后右侧预览区自动刷新，改一行代码，立刻看到效果
- Android 平板可优先试
Playcode，触控拖拽调整编辑/预览比例更顺手
本地写完想立刻看效果，但又不想上传到第三方平台
这种情况适合用支持内置预览的 App，它们会自己起一个微型 HTTP 服务，把你的文件映射成 http://localhost:xxxx：
- iPad 推荐
Textastic Code Editor：保存后点右上角Preview按钮，它会启动本地服务并跳转到对应地址 - Android 推荐
DroidEdit + Termux组合：用 DroidEdit 写，再在 Termux 里执行python -m http.server 8000，浏览器访问http://localhost:8000 - 注意路径：所有资源（
css/、js/、图片）必须和index.html在同一目录或按相对路径组织，否则预览里仍会 404
触摸事件不响应？别只写 onclick
平板不是鼠标设备，只绑 onclick 容易点不动，尤其在较新的 iOS / Android 浏览器中：
- 按钮或可点击区域，必须同时监听
touchstart和click，或者统一用pointerdown - 如果用内联写法，比如
<button onclick="handleClick()"></button>，要确保handleClick函数已在 DOM 加载完成前定义，否则报Uncaught ReferenceError: handleClick is not defined - 更稳妥的做法：把
<script></script>放在前，或加defer属性
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
