纯 html 可搭建可读、可访问、seo 友好的数据面板骨架，关键在于用 grid-template-areas 定义语义化区域、 组织指标、data- 属性传值；硬写 grid-column/row 易错位， 提升无障碍与 seo，data- 属性更安全易调试。
纯 HTML 能搭出可读、可访问、SEO 友好的数据面板骨架，但必须用 grid-template-areas 定义区域、<dl></dl> 组织指标、data- 属性传值——否则一加图表或换屏就错位，后期改一个数字就得同步修 class、aria、样式三处。
为什么不能用 grid-column / grid-row 硬写行列编号
硬写 grid-column: 2 / 4 看似快，实际是埋雷：
- 新增一个「实时请求量」卡片，整行 grid 线偏移，
grid-row: 3可能落到页脚里 - 调试时得反复数线，还容易漏掉
span冲突（比如两个卡片都占grid-column: 1 / 3） - 移动端覆盖时，若只重写
grid-template-columns却漏了grid-template-rows，高度直接失控
正确做法：容器设 display: grid，子元素用 grid-area 匹配命名区域（如 "header"、"live-metrics"），区域名带业务语义，不叫 "area-1"。
<dl></dl> 比 <div class="card"> 更适合指标卡片
<p>一堆 <code><div class="card"> 堆满页面，JS 一改数据就得同步修 class 名、<code>aria-label、focus 状态，维护成本翻倍。而 <dl></dl> 是语义化定义列表，天然支持无障碍阅读器和搜索引擎抓取：
-
<dt></dt> 放指标名（如 P95 延迟）
-
<dd></dd> 放数值（如 247ms），单位和数值同级包裹（别塞进 <span></span> 还加 float）
- 状态徽标（↑↓）放
<dd></dd> 内部，或用 aria-live 区域单独托管
- 颜色只用于传达状态（红=异常、绿=正常），深色背景上避免用低对比度红色（WCAG AA 至少 4.5:1）
data- 属性比内联 JSON 更安全、更易调试
<dt></dt> 放指标名（如 P95 延迟）<dd></dd> 放数值（如 247ms），单位和数值同级包裹（别塞进 <span></span> 还加 float）<dd></dd> 内部，或用 aria-live 区域单独托管data- 属性比内联 JSON 更安全、更易调试把整条 JSON 塞进 data-config，前端还得 JSON.parse()，还容易被 XSS 漏洞盯上。指标维度固定（值、目标、变化率、时间戳），拆成独立 data- 属性更轻：
<div data-value="247" data-target="200" data-change="+12%" data-timestamp="2026-08-03T21:15:00Z"></div>
这样 JS 直接读 el.dataset.value，不用解析、不怕引号逃逸、浏览器开发者工具里一眼看清各字段值。
真正难的不是写出第一版面板，而是当嵌入 ECharts 图表、加个全屏按钮、或者接入 WebSocket 实时数据后，所有区域是否还乖乖待在自己 grid-area 里不溢出——这取决于你一开始有没有把 min-height: 0、overflow: hidden 和 display: flex 的组合关系钉死。
