必须用、等语义标签而非堆砌，因其自带隐式ARIA role，使浏览器、读屏软件和搜索引擎能准确识别导航区、核心内容等意图；而在辅助技术中仅为“无意义容器”，导致焦点丢失、SEO降权、无障碍失效。
工作台页面不是“堆完 div 再套 CSS”就能交差的地方。结构错、语义乱、响应断，后面加权限控制、嵌入数据卡片、做无障碍支持，全得返工。
为什么必须用 <nav></nav> + <main></main> 而不是一堆 <div>
<p>浏览器和读屏软件靠标签名识别区域意图：<code><nav></nav> 表示这是导航入口区，<main></main> 是当前视图核心内容，是辅助信息（如快捷操作、通知）的容器。写成 <div class="nav">，等于把导航栏藏进黑盒——键盘 Tab 无法自动跳过它，SEO 无法提取导航权重，后期加微数据（如 <code>role="navigation"）也补不回语义损失。
-
<header></header> 只包顶部栏（Logo + 用户头像 + 消息图标），别把侧边菜单塞进去
- 放快捷入口、待办计数、系统状态，别放主功能表单
- 所有按钮（如「新建任务」「刷新看板」）必须是
<button></button>，禁用 <div onclick> 模拟
<h3>用 <code>display: grid 划分四区时怎么避免命名冲突
<header></header> 只包顶部栏（Logo + 用户头像 + 消息图标），别把侧边菜单塞进去<button></button>，禁用 <div onclick> 模拟
<h3>用 <code>display: grid 划分四区时怎么避免命名冲突grid-template-areas 看着直观，但一改名字就得同步修所有子元素的 grid-area，容易漏。更稳的做法是线性定义列宽行高，显式分配位置：
- PC 端：
grid-template-columns: 240px 1fr 320px（侧边栏固定、主内容自适应、右侧面板定宽） - 移动端：
@media (max-width: 768px)改为grid-template-rows: auto 1fr auto，再用grid-row控制各区块顺序 -
<nav></nav>设grid-row: 1; grid-column: 1 / -1，让它横跨全部列，不用起名 - Safari ≤15.4 不支持
subgrid，如果右侧面板里还要网格排布，降级用display: flex，别硬撑
<section class="card"></section> 里怎么让图标、标题、操作按钮横向对齐又不卡死
很多人用 float 或 inline-block 排卡片内元素，结果空格吃间距、换行错位、小屏溢出。Flex 是唯一靠谱解法：
立即学习“前端免费学习笔记（深入）”；
- 给
<section class="card"></section>设display: flex; align-items: center; gap: 0.75rem - 图标用内联
<svg></svg>（别引 Font Awesome CDN），设width: 1.25rem; height: 1.25rem; flex-shrink: 0防缩 - 标题用
<h3></h3>，加margin: 0；操作按钮用<button></button>，设margin: 0; padding: 0.25rem 0.75rem - 别给整个卡片设
white-space: nowrap，否则长任务名会撑破容器
切换「编辑态」时为什么不能删掉 DOM 再重 render
点「编辑」就 innerHTML = "<input value="xxx">"，表面能用，实则埋雷：焦点丢失、Tab 键链断裂、屏幕阅读器播报中断、React/Vue 的 re-render 逻辑被绕过。
- 复用原节点，只替换内部文本节点或插入
<input>，保留tabindex和aria-*属性 - 手动调用
input.focus()并设置select()，确保光标定位准确 - 编辑完成时，用
blur事件而非点击空白处来触发保存，避免误触
真正难的不是让卡片看起来能点，而是让键盘用户、屏幕阅读器用户、自动化测试脚本都一致地感知到“这个字段正在编辑”。语义、焦点流、DOM 稳定性，三者缺一不可。
