HTML管理系统布局需遵循语义化约束：必须唯一且不嵌套，position: fixed需配合calc()和margin修复遮挡问题，flex: 1失效主因是父容器缺display: flex或min-height，侧边栏按功能选或。
HTML管理系统布局没有“通用模板”，只有可复用的结构约束和协作边界——用错标签、硬写 position: fixed、忽略语义层级，三者任一都会让后续维护成本翻倍。
为什么 <main></main> 必须唯一且不能嵌套
浏览器和辅助技术（如读屏软件）依赖 <main></main> 标识页面核心内容起点。若出现多个或嵌套在 <section></section> 里，会导致：
- SEO 抓取混乱，搜索引擎可能忽略主内容
- 键盘导航（Tab 键）跳过真正主区域，违反 WCAG 2.1
- 自动化测试工具报
duplicate-main错误
正确写法只有一处：
<body> <header></header> <nav></nav> <main><!-- 唯一主内容 --></main> <aside></aside> <footer></footer> </body>
position: fixed 在后台菜单中怎么用才不翻车
后台常把左侧菜单设为固定定位，但直接写 position: fixed 容易导致：内容区滚动时被遮挡、右侧内容宽度计算失效、打印样式错乱。
立即学习“前端免费学习笔记（深入）”；
- 必须配合
top+left+height: calc(100vh - 48px)（减去 header 高度） - 右侧内容区需加
margin-left: 240px（与菜单宽一致），不能只靠left: 240px - 移动端必须用媒体查询关掉
fixed，改用普通文档流 +overflow-y: auto
否则会出现菜单盖住按钮、右侧内容横向滚动、响应式断点失效等问题。
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
Flex 布局中 flex: 1 失效的三个常见原因
很多人写完 flex: 1 发现没撑满，不是代码写错，而是父容器缺关键声明：
- 父容器没设
display: flex或display: inline-flex - 父容器高度为
auto，没加min-height: 100vh（尤其或根包裹层） - 子元素内含长文本（如日志 ID、base64 字符串），没加
min-width: 0，导致 flex 项强行撑宽
典型修复：
body {
display: flex;
flex-direction: column;
min-height: 100vh;
}
main {
flex: 1;
min-width: 0; /* 关键！防中文/URL 撑破 */
}侧边栏该用 <aside></aside> 还是 <nav></nav>
取决于内容性质，不是位置：
- 纯功能导航（系统设置、用户管理、权限配置）→ 用
<nav></nav> - 辅助信息（操作提示、数据统计卡片、最近操作记录）→ 用
<aside></aside> - 混合内容？拆开：导航部分放
<nav></nav>，其余放<aside></aside>，别塞进一个标签
混淆使用会让 AT（辅助技术）误判导航意图，也增加 CSS 选择器复杂度——比如 nav ul li a 和 aside .stat-card 本不该共享同一套样式逻辑。
真正难的不是写对某一行 CSS，而是从第一行 HTML 就决定好语义边界。一旦用 <div class="header"> 替代 <code><header></header>，后面所有 Flex 控制、无障碍支持、模块复用，都得绕着这个“伪结构”打补丁。
