单页应用html结构需平衡语义、可维护性与路由承载能力，必须包含charset、viewport、lang和id="app"四个基础标签，并确保nav在app内、main为挂载点、hash锚点预置、脚本仅启动框架。
单页应用（SPA）的 HTML 结构不是越“空”越好，而是要在语义、可维护性、路由承载能力三者之间取得平衡。一个没加 #app 容器、漏掉 viewport 或用错 lang 属性的初始模板，上线后大概率卡在首屏渲染、SEO 抓取或移动端缩放异常上。
必须包含的 4 个基础标签
这些不是“可选配置”，而是现代 SPA 能正常工作的底线：
-
<meta charset="UTF-8">：缺它会导致中文乱码、fetch 响应解析失败，尤其在读取本地 JSON 或 API 返回含中文字段时 -
<meta name="viewport" content="width=device-width, initial-scale=1.0">：不写这行，iOS Safari 会强制按 980px 渲染，所有响应式 CSS 形同虚设 -
（中文站）或（英文站）：影响屏幕阅读器发音、搜索引擎语言识别，也关系到某些 CSS 伪类（如:lang()）行为 -
<div id="app"></div>：Vue/React/Angular 等框架默认挂载点，也是手写路由时document.getElementById('app')的唯一安全目标——别用class="app"，ID 才能确保唯一性
nav 和 main 的位置不能颠倒
很多模板把 <nav></nav> 放在 最外层，再套一层 <div id="app">，这是错的。SPA 的导航栏通常需要和路由联动（比如高亮当前页），必须被框架控制范围覆盖。
<p>正确结构是：</p>
<pre class="brush:php;toolbar:false;">
<nav id="main-nav"></nav><main id="app"></main><footer></footer></pre>
<p>这样做的原因：</p>
<ul>
<li>
<code><nav></nav> 在 #app 外：适合纯静态导航（如公司 logo、联系方式），不随路由变化
<nav></nav> 在 #app 内：适合动态导航（如 Tab 切换、侧边栏菜单），由 Vue Router / React Router 控制渲染<main></main> 标签直接作为挂载点（即 id="app"）更符合 ARIA 规范，role="main" 会自动继承hash 模式下必须预留 id 锚点
如果你不用 Vue Router 的 history 模式（即不依赖服务端配合），而是走原生 hashchange，那 HTML 里就得提前写好对应区块的 id，否则 location.hash = '#contact' 点击后页面不会滚动，用户以为功能坏了。
常见疏漏点：
- href 写成
#Contact，但区块 ID 是contact（大小写敏感） - href 用了短横线
#our-services，但 ID 写成our_services（连字符 ≠ 下划线） - JS 动态插入内容后，忘了给新生成的 section 补上
id，导致 hash 跳转失效
建议在模板里就预留好典型区块：
<section id="home"></section><section id="about"></section><section id="contact"></section>
不要在初始 HTML 里塞业务逻辑代码
看到有人在 <script></script> 标签里直接写 fetch('/api/user').then(...)，这是危险操作。SPA 的数据加载应该由框架生命周期（如 Vue 的 mounted、React 的 useEffect）统一管理，否则会出现：
- HTML 加载完成前 JS 就执行，
document.getElementById('app')返回 null - 多个入口脚本重复请求同一接口，造成资源浪费
- 服务端直出（SSR）时，客户端 hydration 失败，页面闪动或空白
初始模板里的 <script></script> 应该只做一件事：启动框架实例。其余逻辑全部交给模块文件（如 main.js 或 app.ts）。
最常被忽略的其实是 lang 属性和 viewport 的组合效果——它们不报错，但一旦上线，SEO 和移动适配问题会集中爆发，且很难定位到是 HTML 结构本身的问题。
