直接用浏览器打开 HTML 文件即可运行；AI 生成的合法 HTML 代码保存为 .html 后缀后，双击就能本地运行，无需服务器或网络，但需注意编码（UTF-8）、路径（避免中文和空格）、资源引用（CDN 需联网）、脚本执行时机（script 移至 /body 前或加 defer）、file:// 协议限制（fetch/localStorage 等 API 受限），必要时用 Python 或 Live Server 启动本地 HTTP 服务。
直接用浏览器打开 HTML 文件就行
AI 生成的 HTML 代码只要结构合法（有 <html>、<body> 等基本标签），保存为 .html 后缀文件后，双击就能在本地浏览器中运行——不需要服务器、不依赖网络、也不用装开发环境。
常见错误现象：Uncaught ReferenceError: React is not defined 或图片/样式加载失败，通常是因为 AI 生成了需要 CDN 加载 React、Vue 或外部 CSS 的代码，但你本地没联网，或浏览器阻止了混合内容（HTTP 资源在 HTTPS 页面里）。
- 保存时务必用 UTF-8 编码（VS Code、Notepad++ 默认支持；Windows 记事本要选“另存为 → 编码选 UTF-8”）
- 避免用中文路径或空格命名文件，比如
我的页面.html或test page.html，容易触发浏览器安全策略或路径解析异常 - 如果代码里引用了
https://cdn.jsdelivr.net/...这类远程资源，确保设备已联网；离线时可临时注释掉<script src="...">或替换为本地副本
快速验证 JS 交互是否生效
很多 AI 生成的 HTML 带内联 <script>，但脚本执行时机不对会导致 Cannot read property 'addEventListener' of null —— 这是因为 DOM 元素还没加载完，JS 就开始找元素了。
解决方法很简单：把 <script> 标签移到 </body> 前，或者加 defer 属性：
立即学习“前端免费学习笔记（深入）”；
<script defer>
document.getElementById('btn').addEventListener('click', () => {
alert('works');
});
</script>
- 不要用
window.onload或DOMContentLoaded包一层再简单操作——对单页小 demo 来说过度复杂 - 检查控制台（F12 → Console）是否有红色报错，重点看第一行错误信息，不是所有警告都影响运行
- 如果用了
fetch()或localStorage，注意本地直接双击打开时协议是file://，部分 API 会被浏览器禁用；此时需用轻量服务器（见下一条）
需要本地服务器时，用 Python 或 Live Server 最省事
当代码涉及 fetch('/api/data.json')、import 语法、或 Web Components 自定义元素时，file:// 协议会因跨域或模块限制直接报错，必须起一个本地 HTTP 服务。
推荐两个零配置方案：
- 有 Python 3.6+：终端进入 HTML 所在目录，运行
python -m http.server 8000，然后访问http://localhost:8000/your-page.html - 用 VS Code +
Live Server插件：右键 HTML 文件 → “Open with Live Server”，自动打开浏览器并启用热更新 - 不用 Node.js 全家桶——
npm install -g serve多一步安装，且容易因权限或版本冲突失败
注意：Python 自带的 http.server 不支持 HTTP/2 或 ES 模块的 MIME 类型自动识别，若遇到 Failed to load module script，改用 Live Server 或升级到 Python 3.11+ 并加 --bind 127.0.0.1:8000 参数（部分系统需要）。
移动端预览别靠截图，用 Chrome DevTools 设备模拟
AI 生成的响应式 HTML 经常标了 <meta name="viewport" content="width=device-width">，但双击打开后在手机上直接访问 file:// 是无效的。真机调试必须走 HTTP 协议 + 同一局域网。
- 电脑和手机连同一 WiFi，Python 起服务时用
python -m http.server 8000 --bind 0.0.0.0:8000（注意0.0.0.0，不是127.0.0.1） - 查电脑局域网 IP（Windows 用
ipconfig，macOS/Linux 用ifconfig），手机浏览器输入http://192.168.x.x:8000/your-page.html - 更轻量的做法：Chrome 桌面版按 F12 → 右上角
Toggle device toolbar（Ctrl+Shift+M），选 iPhone / Pixel 等机型实时看渲染效果
真正容易被忽略的是 viewport meta 标签位置——它必须写在 <head> 里，且不能被 AI 错误地包进 <script> 或注释中；否则移动端永远以桌面宽度渲染。
