纯HTML可构建语义化、无障碍、SEO友好的监控仪表盘骨架；须用grid-template-areas定义业务区域名，dl标签结构化指标，data-属性分拆后端数据，卡片布局采用flex-column+min-height:0实现等高自适应。
纯 HTML 无法构成可运行的监控仪表盘，但能搭出零 JS 也能看清结构、无障碍可用、SEO 可抓取的基础骨架——关键不是“能不能动”，而是“断电时人还能不能读明白”。
grid-template-areas 必须定义语义化区域名
硬写 grid-column: 2 / 4 或 grid-row: 3 看似快，但加个新卡片或改个高度，整行网格线就偏移，调试时得反复数线，还容易漏掉 span 冲突。区域名必须带业务含义，比如 "header"、"live-metrics"、"device-status"，别用 "area-1" 这类编号。
- 容器设
display: grid，子元素用grid-area匹配命名区域 - 新增模块只需在
grid-template-areas字符串里加个词，再给对应元素设grid-area，其他区域完全不受影响 - 移动端覆盖时，
grid-template-rows和grid-template-columns必须同步重写，否则未定义维度会回退到默认行为，高度失控
指标卡片必须用 <dl></dl> 而不是一堆 <div class="card">
<p>直接套 <code><div class="card"> 堆满，JS 一改数据就得同步修 <code>class、aria-label、focus 状态，后期维护成本翻倍。<dl></dl> 是语义化定义列表，天然支持无障碍阅读器、搜索引擎抓取和样式隔离。
-
<dt></dt> 放指标名（如 P95 延迟），<dd></dd> 放数值（如 247ms）
- 数值单位（
%、ms、req/s）必须和数字同级包裹，别塞进 <span></span> 还加 float——Flex 下用 margin-left 更稳
- 状态徽标（如 ↑ ↓ 箭头）放
<dd></dd> 内部，或用 aria-live 区域单独托管
- 颜色只用于传达状态（红=异常、绿=正常），深色背景上避免用
#ff6b6b 这类低对比度红色，WCAG AA 至少要 4.5:1
后端注入数据优先用 data- 属性而非内联 JSON
<dt></dt> 放指标名（如 P95 延迟），<dd></dd> 放数值（如 247ms）%、ms、req/s）必须和数字同级包裹，别塞进 <span></span> 还加 float——Flex 下用 margin-left 更稳<dd></dd> 内部，或用 aria-live 区域单独托管#ff6b6b 这类低对比度红色，WCAG AA 至少要 4.5:1data- 属性而非内联 JSON把整条 JSON 塞进 data-config，前端还得 JSON.parse()，还容易被 XSS 漏洞盯上。指标维度固定（值、目标、变化率、时间戳），拆成独立 data- 属性更轻、更安全、更易调试。
立即学习“前端免费学习笔记（深入）”；
- 和
data-target="300"保持数字类型，方便 JS 直接做比较和计算百分比 -
data-trend="+2.3%"带符号，省去前端判断升降逻辑；若为null或空字符串，就默认不渲染趋势箭头 - 服务端渲染时，这些属性天然可被监控工具或爬虫抓取，比藏在 JS 变量里靠谱得多
- 别用
data-*='{"value":247,"target":300}'这种嵌套 JSON，解析成本高、调试困难、XSS 风险高
卡片等高布局别用 flex: 1 拉伸内容
用 flex: 1 强制拉伸卡片主体，会让文字行高失真、按钮被压扁、图标比例错乱。真正稳的方案是“容器截断 + 内容自适应”：
- 给卡片设
display: flex; flex-direction: column; - 卡片主体（如描述文字区）加
flex: 1; min-height: 0;——min-height: 0是关键，否则 flex 项不会收缩 - 底部操作区（如按钮）用
margin-top: auto;推到底部，不依赖高度计算
这样即使某张卡只有两行字，另一张有五段，它们的标题、按钮依然水平对齐，且文字不会被强制撑开。最常被忽略的是 min-height: 0，缺了它，flex 项会按内容自然撑高，等高就失效了。
