清爽后台的底层逻辑是语义清晰、视觉有呼吸感，应使用<section><aside><header><main><footer>等语义化标签替代无意义div，配合CSS Grid布局与原生表单控件提升可访问性、SEO及可维护性。
用 <section> 和 <aside> 划分主次区域，别堆 <div>
清爽后台的底层逻辑是语义清晰、视觉有呼吸感。浏览器默认对 <section>、<aside>、<header> 有合理外边距和结构暗示，比一堆无意义的 <div class="wrap"> 更易维护也更利于后续 CSS 重置。
常见错误：把整个左侧菜单写成 <div id="sidebar">，结果发现缩放时错位、打印样式失效、屏幕阅读器读不出导航意图。
- 左侧菜单用
<aside aria-label="navigation">，加aria-label明确作用 - 主内容区用
<main>，不是<section>——<main>是页面唯一主体，SEO 和可访问性都认这个 - 顶部栏用
<header>，里面放<h1>（哪怕视觉上隐藏，也别删）
用 grid-template-areas 控制布局流向，少写浮动和绝对定位
后台管理页最怕“改一个按钮位置，整个布局崩”。用 CSS Grid 的命名区域直接绑定 HTML 结构，视觉顺序和 DOM 顺序一致，响应式也干净。
示例：
立即学习“前端免费学习笔记（深入）”；
body {
display: grid;
grid-template-areas:
"header header"
"nav main"
"footer footer";
grid-template-rows: auto 1fr auto;
grid-template-columns: 240px 1fr;
}
对应 HTML：
<header>...</header> <aside>...</aside> <main>...</main> <footer>...</footer>
然后给每个元素加 grid-area：
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
-
<header>→grid-area: header -
<aside>→grid-area: nav -
<main>→grid-area: main -
<footer>→grid-area: footer
这样改布局只需动 CSS，不用碰 HTML 标签嵌套层级。
表格用 <table>，别用 <div> 模拟
后台大量数据列表，用 <div> 做“表格”看似灵活，实则踩坑无数：键盘焦点跳转乱序、排序筛选 JS 难绑定、导出 Excel 无法识别结构、无障碍阅读器读成“一行文字”，而不是“第3行，用户名列”。
正确做法：
- 必须用
<table>+<thead>+<tbody>，<th>加scope="col" - 每行
<tr>里用<td>，不要用<div role="cell"> - 需要操作列（如编辑/删除按钮），在
<td>里放按钮，别单独抽成“操作容器”
性能影响小，但可访问性和后期扩展性高很多。
按钮和输入框统一用 <button> 和 <input type="text">，别用 <div onclick>
后台交互控件最容易被“图省事”写成 <div class="btn">提交</div>，结果导致：键盘无法空格/回车触发、焦点样式丢失、禁用状态需手动加 class、屏幕阅读器读不出“这是一个按钮”。
实操建议：
- 所有可点击操作用
<button type="button">（明确类型避免表单意外提交） - 搜索框用
<input type="search">，不是text—— 移动端会显示放大镜图标，且支持清空按钮原生行为 - 开关类控件用
<input type="checkbox">+<label>包裹，别自己画圆点
复杂交互可以封装组件，但基础语义标签不能跳过 —— 后期加 dark mode、键盘导航、自动化测试都会卡在这里。
