最简HTML独立页面骨架为：<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8"></head><body><div id="app"></div></body></html>，必须顶格书写、含lang属性、UTF-8声明、SPA挂载容器，且资源用相对路径避免file://协议CORS问题。
HTML独立页面最简骨架长什么样
一个能被浏览器直接双击打开、不依赖服务器也能正常加载资源的 HTML 页面，核心就三样：<!DOCTYPE html>、<html>、<body>。少任何一项都可能触发怪异模式或样式错乱。
常见错误是漏掉 <html lang="zh-CN"> 的 lang 属性，导致屏幕阅读器识别异常，SEO 也弱化；还有人把 <script> 放在 <head> 里又没加 defer，结果阻塞渲染，白屏几秒。
-
<!DOCTYPE html>必须顶格第一行，不能有空格或注释前置 -
<html>标签必须包裹全部内容，且建议带lang属性 -
<head>里放<meta charset="UTF-8">，顺序靠前，否则中文可能乱码 -
<script>若操作 DOM，优先放</body>前；若需提前加载逻辑，用defer
单页应用（SPA）需要额外加什么
纯静态 HTML 骨架跑不了路由切换、状态管理这些 SPA 功能。真正要支撑 SPA，光有结构不够，得靠 JS 运行时接管渲染和跳转——但骨架本身仍得为它留好钩子。
关键不是“多写几个标签”，而是预留可被 JS 框架识别/挂载的容器节点，并避免服务端干扰。比如 create-react-app 默认找 id="root"，Vue 3 的 createApp 通常挂载到 id="app"。
立即学习“前端免费学习笔记（深入）”；
- 必须有一个空的、带唯一
id的容器元素，如<div id="app"></div> - 不要在该容器内写任何初始 HTML 内容，否则框架初始化时会清空它，造成闪烁或冗余 DOM
- 如果要用
history.pushState实现前端路由，<base href="/">很重要，否则相对路径资源 404 - 开发阶段可加
<script type="module">直接引入 ESM 脚本，但生产环境建议构建后输出单个.js文件
为什么本地双击打开经常报 CORS 或路径错
这不是 HTML 骨架写错了，而是浏览器的安全策略：当用 file:// 协议打开页面时，XMLHttpRequest / fetch、import()、甚至部分 <link rel="stylesheet"> 的相对路径都会被拦截，报 Access to script at 'file:///xxx' from origin 'null' has been blocked。
- 静态资源（CSS/JS/图片）尽量用相对路径，且确保文件目录结构与引用路径一致
- 绝对路径如
/assets/main.js在file://下会解析成file:///assets/main.js，必然 404 - 想绕过？临时方案是 Chrome 启动时加
--disable-web-security --user-data-dir=/tmp（仅调试），但不能用于交付 - 真正可靠的解法：起一个本地 HTTP 服务，哪怕只是
npx serve或python3 -m http.server
要不要加 <script type="module"> 和 nomodule
如果你的 JS 逻辑简单、不依赖现代语法，可以不用。但一旦用了 import、箭头函数、const 等 ES6+ 特性，就必须面对兼容性问题——尤其 IE11 或旧版 Safari。
type="module" 的脚本默认 defer，且只在支持模块的浏览器中执行；nomodule 则是给不支持模块的浏览器兜底的降级脚本。
- 现代项目推荐用
<script type="module" src="main.mjs"></script> - 同时加一行
<script nomodule src="main.fallback.js"></script>，里面放编译后的 ES5 代码 - 注意：Webpack/Vite 默认生成的
.js文件不是模块，除非你显式配置type: "module"或用.mjs后缀 - 单独写
<script>import('./x.js')</script>不生效，必须是type="module"才允许顶层import
骨架本身很简单，难的是让每个环节不互相踩脚：编码格式、路径解析、模块加载、CORS 策略、挂载时机……稍有错位，页面就卡在白屏或报错里，而错误信息往往藏在控制台第三屏以后。
