纯html仅提供静态骨架，无法实现真实后台所需的交互、数据加载、权限校验与路由切换；所有动态行为必须依赖javascript与后端协同完成。
纯 HTML 项目无法构成真正可用的后台管理系统，它只能搭出静态骨架；所有交互、数据、权限、路由都得靠 JS 和后端补全——这是硬边界，不是优化空间。
为什么写死的 <nav></nav> 菜单点不动
HTML 本身没有点击响应能力。你写的 <li>@#@#@#@#@#@#@#@#@#@0</li> 只是锚点跳转，不会切换内容区、不触发 API、不校验权限。
- 真实后台里，“用户管理”菜单点击后要：加载
/api/users数据、渲染表格、高亮当前菜单项、检查角色是否有user:read权限 - 这些全靠 JS 实现：
addEventListener('click', fetchUsers)+ 后端返回的role字段判断显隐 - 如果只用
href="#orders"，页面只会滚动到 id="orders" 的元素，而这个元素很可能根本不存在或没数据
position: fixed 侧边栏盖住头部或截断怎么办
常见错误是只写 top: 0，却没对齐 header 实际高度，导致遮挡或底部留白。这不是 CSS 写错了，而是没把布局约束钉死。
- 先用浏览器开发者工具查
header的 computed height（比如 48px），不能猜、不能写死 50px - 侧边栏必须同时设：
top: 48px（等于 header 高）、bottom: 0（撑满剩余高度）、overflow-y: auto（长菜单可滚动） - 主内容区对应设：
margin-left: 240px（侧边栏宽）+min-height: calc(100vh - 48px)，否则小屏下内容被裁或双滚动条 - 别用
height: 100%—— 它依赖父容器高度，而默认不继承视口高
登录页 <form></form> 提交后白屏或 404
因为浏览器按标准行为提交了表单，但 action 指向了空值、# 或一个后端根本没搭的路径。
- 开发阶段，
<form method="POST" action="/login"></form>是底线；哪怕后端还没写，也要确保这个 URL 至少能返回 200（比如用 mock 服务） - 如果想用 JS 处理登录逻辑，必须加
event.preventDefault()，且紧接着做字段校验：if (!username.value.trim()) { alert('用户名不能为空'); return; } -
required属性只在原生表单提交时生效；一旦用了onclick或addEventListener，就得手动校验，否则空提交照发 - 移动端软键盘点“搜索”会绕过所有 JS 监听，所以
<form></form>的onsubmit是更稳妥的拦截点
为什么不能用 <frameset></frameset> 做左右分栏
<frameset></frameset> 在 HTML5 中已被完全移除，现代浏览器（Chrome/Firefox/Edge）要么不渲染，要么直接报错 DOMException: Failed to execute 'write' on 'Document'。
- 它导致 history 不可用（
pushState失效）、SEO 归零、打印样式崩溃、移动端适配彻底失效 - 替代方案只有两个：
<div> + CSS Grid/Flex 布局（适合轻量静态页），或 JS 驱动的 SPA 路由（如 Vue Router / React Router）<li>哪怕只是模拟“左侧菜单+右侧内容”，也该用语义化结构：<code><nav class="sidebar"></nav>+<main class="content"></main>，再用 CSS 控制尺寸和定位
最常被忽略的点是：HTML 骨架里每一个 id、for、data-* 属性，都是后续 JS 操作和后端注入的锚点。写的时候图省事留空或乱命名，后面联调时就要花三倍时间找 DOM 绑定失败的原因。
