用语义化HTML（section/article/figure/dl）+ CSS Grid/Flex + data-*属性 + textContent更新，可快速搭建高可读、易维护、无障碍友好的指标卡片，兼顾性能与合规性。
怎么用 HTML + CSS 快速搭出可读性强的指标卡片
纯 HTML 搭仪表盘，核心不是“炫技”，而是让数字一眼可读、状态一目了然。别急着套框架，先用语义化标签把结构钉死：<section></section> 包一组指标，<article></article> 或 <figure></figure> 单卡，<dl></dl>（定义列表）比 <div> 套来套去更利于无障碍和样式隔离。<p>常见错误是直接用 <code><div class="card"> 堆满，结果 JS 一改数据就得同步修 class、aria-label、focus 状态——后期维护成本翻倍。<ul>
<li>指标名用 <code><dt></dt>，数值用 <dd></dd>，状态徽标放 <dd></dd> 内部或用 aria-live 区域单独托管
%、ms、req/s）必须和数字同级包裹，别写在 <span></span> 里还加 float —— Flex 布局下用 margin-left 更稳#ff6b6b 这类低对比度红色，WCAG AA 至少要 4.5:1为什么 data-* 属性比内联 JSON 更适合指标卡片数据注入
后端吐数据时，很多人习惯把整条 JSON 塞进 data-config，结果前端还得 JSON.parse()，还容易被 XSS 漏洞盯上。真没必要——指标卡片的数据维度固定（值、目标、变化率、时间戳），拆成独立 data- 属性更轻、更安全、更易调试。
比如这张“API 响应时间”卡：
立即学习“前端免费学习笔记（深入）”；
<article data-metric="p95-latency" data-value="247" data-target="200" data-change="-12.3" data-unit="ms" data-updated="2024-06-12T08:32:15Z">
<dl>
<dt>P95 延迟</dt>
<dd><span class="value">247</span><span class="unit">ms</span></dd>
</dl>
</article>-
data-value和data-target保持数字类型（不带单位），方便 JS 直接做比较和计算百分比 -
data-change带符号（-12.3），省去前端判断升降逻辑；若为null或空字符串，就默认不渲染趋势箭头 - 服务端渲染时，这些属性天然可被搜索引擎/监控工具抓取，比藏在 JS 变量里靠谱得多
响应式卡片宽度崩坏？别碰 width: 100%，用 minmax() + fit-content
仪表盘常按网格排布（比如 3 列），但硬写 width: 33.333% 在小屏下文字换行会撑开卡片、破坏对齐；写 flex: 1 又容易让空卡片塌缩成一条线。
真正稳的写法是 Grid 配合内容自适应：
.dashboard-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 1rem;
}-
minmax(300px, 1fr)保证单卡最小 300px（适配手机横屏），又能在宽屏下均分剩余空间 - 卡片自身用
width: fit-content+max-width: 100%，防止长数字或英文单词溢出 - 绝对避免在卡片内部设
width: 100%或height: 200px—— 这会让字体缩放、动态内容加载时布局跳动
为什么不要用 innerHTML 渲染指标数值
JS 更新数值时，有人图快直接 el.innerHTML = '<span>' + value + '</span>'，结果 XSS 风险、HTML 转义遗漏、DOM 重绘范围失控全来了。指标卡片更新频率高（秒级轮询），更要克制 DOM 操作粒度。
- 只更新数值文本节点：用
el.querySelector('.value').textContent = newValue，安全且高效 - 状态徽标（如「↑」「↓」或「⚠️」）用
dataset.change控制显隐，而不是拼 HTML 字符串 - 如果数值含千分位或小数位，统一走
Intl.NumberFormat格式化，别用正则或字符串拼接——不同 locale 下逗号/句点规则完全不同
最常被忽略的是：卡片容器没设 contain: content。Chrome/Firefox 下，频繁更新 textContent 仍可能触发非必要重排。加这一行，浏览器就知道“这盒子里的变化不影响外面”。
