直接双击index.html能运行的页面才是真原型，需用相对路径、声明utf-8编码、设置viewport、禁用cdn/fetch/服务端语法，并确保html lang与meta charset位于head最前。
直接双击 index.html 能跑起来的页面，才是真原型——不依赖服务器、不走构建流程、不卡在本地 file:// 协议报错上。
为什么不能直接双击打开就完事？
常见错误现象：net::ERR_FILE_NOT_FOUND（CSS/JS 加载失败）、Failed to load resource（图片 404）、fetch 报跨域错误、中文乱码、手机上缩放失常。这些不是代码写错了，而是路径、协议、编码或响应式基础没对齐。
-
src和href必须用相对路径，且以 HTML 文件所在目录为基准：比如img/logo.png表示同级img文件夹下的文件；../css/style.css表示上层目录里的css文件夹 - 绝对路径（如
/css/style.css）或 URL（如https://example.com/style.css）在双击打开时可能失效，除非你用 Live Server 或本地服务 -
meta charset="UTF-8"必须写在最前面，否则中文注释或内容可能乱码；VS Code 默认保存为 UTF-8，但 Notepad++ 或某些编辑器可能默认 GBK -
meta name="viewport"缺失会导致移动端页面被缩成一团，iPhone 上根本没法点——这不是样式问题，是浏览器渲染模式没切对
怎么让 AI 生成的 HTML 真正能双击运行？
很多 AI 工具输出的 HTML 看似完整，但暗藏陷阱：引用了 CDN 的 CSS/JS、用了 fetch('./data.json')、路径带 /assets/ 前缀、甚至包含 SSI 注释（<!--#include file="header.html"-->）。这些在 GitHub Pages 或 Vercel 上能跑，在本地双击就直接挂。
- 删掉所有
<script src="https://cdn.jsdelivr.net/..."></script>，改用本地<script src="./js/main.js"></script>，并确保该文件真实存在 - 把
fetch('./config.json')这类调用全干掉，换成内联数据：<script>const config = { title: "我的页面", version: "v1.2" };</script> - 检查所有
<img src="...">，确认路径可访问；若不确定，先用 base64 小图占位，比如src="data:image/png;base64,iVBORw0KGgo..." - 禁用任何服务端逻辑痕迹：删掉
<!--#include-->、<?php include...?>、{{ variable }}模板语法——纯静态页不认这些
template literals 适合插哪几类变量？
它不是模板引擎，只是 JS 字符串拼接的轻量替代。用对地方省事，用错地方反而引入闪屏和 XSS 风险。
- 适用场景：版本号（
const version = "v2.3.0"）、标题（const title = "API 文档"）、环境标识（const env = "staging"）这类固定值 - 更新方式统一用
textContent，别用innerHTML：比如document.getElementById("version").textContent = version; - 如果变量来自 URL 参数（如
?lang=zh），必须做校验和转义，或直接用URLSearchParams解析后白名单过滤 - 别用它拼整个
<section>...</section>—— DOM 插入多了会重排重绘，用户看到的是“先空白再刷出”，不如手写结构 + JS 控制显隐
最易被忽略的其实是 和 <meta charset="UTF-8"> 的位置——它们必须紧贴 开头，差一行都可能让部分浏览器回退到怪异模式（Quirks Mode），导致盒模型、字体渲染全乱。这不是兼容性“建议”，是现代 HTML 的硬性起点。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
