最稳妥的语义化数字统计区应使用+/结构，其中放指标名、放JS格式化的数值，避免或滥用，并配合占位策略与响应式布局。
用 <dl></dl> + <dt></dt>/<dd></dd> 做语义化数字统计区
直接用 <dl></dl> 是最稳妥的选择——它原生支持“术语+定义”结构，而统计数据本质就是“指标名 + 数值”，语义完全匹配。比硬套 <div> 或滥用 <code><ul></ul> 更利于屏幕阅读器识别，也方便后续加 CSS 样式控制对齐和间距。
常见错误是把数字塞进 <dt></dt>、描述放 <dd></dd>，顺序反了。正确做法是：<dt></dt> 放指标名称（如“用户总数”），<dd></dd> 放带单位/格式的数值（如“24,891 人”）。
-
<dl></dl>不需要额外 class 就能被 CSS 选中，例如dl dt控制标签宽度，dl dd控制数值字体粗细和颜色 - 如果要响应式换行（比如小屏上指标名在上、数字在下），用
display: flex配合flex-wrap比浮动更可靠 - 避免给
<dd></dd>设固定宽高，否则长数字（如“12,345,678”）可能溢出或折行错位
数值格式化必须在 JS 中处理，别靠 HTML 硬写
HTML 是结构层，不负责格式。像千分位分隔、小数位截断、单位缩写（K/M/B）这些，必须由 JS 动态注入，否则无法适配不同数据源或 locale。
常见错误是把 “1000000” 直接写成 “1,000,000” 在 HTML 里，结果后端改了数据，前端忘了同步更新，或者国际化时没做数字本地化。
立即学习“前端免费学习笔记（深入）”；
- 用
Intl.NumberFormat最省心，例如new Intl.NumberFormat('zh-CN').format(1234567)→ “1,234,567” - 若需缩写，别手写判断逻辑，推荐用
numeral.js或轻量函数：输入 987654 → 输出 “987.7K” - 数值更新后，只替换
<dd></dd>的textContent，不要 innerHTML 全量重绘，避免事件监听器丢失
避免用 <table> 展示单行统计，除非真有多维维度
<p>有人一看到“对齐”就本能想用 <code><table>，但单组指标（如“新增用户｜活跃率｜平均停留时长”）不是表格数据，而是并列的独立度量项。用 <code><table> 会误导辅助技术，且增加 DOM 复杂度。
<p>典型错误现象：用 <code><table> 做三列统计后，发现小屏下横向滚动，或想加 hover 效果时发现 <code><td> 没法单独设 border-radius。
<ul>
<li>横向并列用 <code>display: grid，列宽设为 minmax(120px, 1fr)，自动均分又防过窄
<dd></dd> 加 class，不要嵌套 <span></span> 再加样式<table>，且必须带 <code>scope="col" 和 scope="row"
动态加载时，先占位再填充，别留空白闪动
统计数据常来自 API，加载有延迟。直接清空区域等数据回来，会导致页面区块跳动或布局偏移，体验很差。
常见错误是 JS 里先 el.innerHTML = ''，再 el.innerHTML = renderedHTML，中间空白期明显。
- 初始化时用
<dd> <span aria-hidden="true">—</span><span class="sr-only">数据加载中</span> </dd>占位，既显示视觉灰度，又兼顾读屏 - CSS 中给
dd设固定最小高度（如min-height: 1.2em），防止文字高度变化引发抖动 - 接口失败时，保留占位符并加一层
data-error属性，便于用 CSS 显示叹号图标或重试按钮
