轻松用HTML搭建简易后台框架-html教程-PHP中文网

纯html只能搭建后台框架的静态视觉骨架，缺乏js交互、api数据获取和权限逻辑；侧边栏需设top等于头部高度、bottom:0等属性避免错位截断；fetch须在dom加载后执行且依赖本地服务；iframe存在跨域、seo及高度塌陷等问题。

轻松用html搭建简易后台框架

纯 HTML 可以搭出后台框架的视觉骨架，但它不是“后台系统”，只是个静态壳。没有 JS 控制菜单、没有 API 拉数据、没有权限逻辑，点任何菜单都不会变内容，刷新就回到初始状态。

为什么 `position: fixed` 侧边栏总盖住头部？

因为 top: 0 没对齐真实头部高度。浏览器里用开发者工具看 .header 的 computed height，比如是 48px，那就必须写：

aside { position: fixed; top: 48px; left: 0; bottom: 0; width: 220px; overflow-y: auto; }

漏掉 bottom: 0 → 长菜单直接截断，下半部分点不到
只写 height: 100vh → 在有地址栏的移动端会撑高，触发双滚动条
没设 min-width: 200px → 小屏下文字挤成一团，图标和文字重叠

`fetch('/api/users')` 放哪儿？HTML 里根本放不了

HTML 文件本身不执行 JS，更不会自动调用接口。你得在 <script></script> 标签里手动写：

使用HTML,CSS,JavaScript开发Android应用程序英文文字pdf版附源文件

如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更

下载

<script>
fetch('/api/users')
  .then(r => r.json())
  .then(data => {
    const list = data.map(u => <li>${u.name}).join('');
    document.getElementById('users').innerHTML = <ul>${list};
  });
</script>

这段代码不能放在顶部，否则 document.getElementById('users') 找不到节点 → 要么放底部，要么监听 DOMContentLoaded
fetch 报 TypeError: Failed to fetch？先确认后端已启动、CORS 已开、路径拼写没错（/api/users ≠ /api/user）
本地双击打开 HTML 文件（file:// 协议）时，fetch 必然失败 —— 浏览器禁止跨源请求，必须起一个本地服务（如 npx serve）

用 `<iframe></iframe>` 嵌内容页靠谱吗？

能快速隔离区域，但坑比想象中多：

frameborder="0" 是废弃属性，必须补 CSS：border: none
高度塌陷是常态：不设 height，<iframe></iframe> 默认只有 150px 高 → 必须显式写 style="height: 600px;" 或用 JS 动态同步父页面高度
跨域时无法读取子页面 DOM，也无法用 JS 控制其滚动或样式 → 如果嵌的是自己写的 orders.html，没问题；嵌第三方报表页，基本只能当“图片”看
SEO 和可访问性极差，屏幕阅读器通常跳过 <iframe></iframe> 内容