营养成分表应使用语义化HTML结构，优先采用<dl>（定义列表）而非<table>，其中<dt>表示营养素名称、<dd>表示数值及单位，以准确表达“术语-定义”关系，提升可访问性与WCAG兼容性；多列对比可用<div role="group">包裹并辅以aria-label；CSS推荐display: grid实现弹性对齐与响应式换行；单位与精度须严格遵循GB 28050-2011规范，如脂肪保留1位小数、钠取整、“%NRV”不得翻译；打印需专用@media print样式，避免字体错位与边框失效。
用语义化 HTML 结构表达营养成分表
营养成分表不是表格堆砌，而是有明确层级和含义的数据展示。直接套用 <table> 容易丢失可访问性与结构语义，尤其对屏幕阅读器不友好。正确做法是用 <dl>（定义列表）——<dt> 表示营养素名称（如“能量”），<dd> 表示数值及单位（如“180 kJ / 43 kcal”）。
原因很简单：<dl> 天然表达“术语-定义”关系，比 <table> 更贴合营养标签的语义逻辑；同时兼容 WCAG 2.1，且 CSS 控制左右对齐、换行、响应式更灵活。
- 避免把每行都写成
<tr><td>能量</td><td>180 kJ</td></tr>—— 这会让辅助技术误读为“无上下文的二维网格” -
<dt>内不要嵌套<strong>或<span>做样式，语义优先；样式统一交给 CSS - 若需支持多列对比（如“每100g”和“每份”），可用
<div role="group">包裹两组<dl>，并加aria-label
CSS 实现紧凑对齐与移动端断行
营养成分表常被要求“左对齐名称、右对齐数值”，但又不能靠 float 或固定宽度硬撑——不同语言（如中文“碳水化合物” vs 英文“Carbohydrates”）长度差异大，且小屏需自动换行。
推荐用 display: grid 配合 minmax() 和 auto-fit，兼顾对齐与弹性：
立即学习“前端免费学习笔记（深入）”；
.nutrient-list {
display: grid;
grid-template-columns: minmax(80px, 1fr) minmax(60px, 1fr));
gap: 0.25em 1em;
}
@media (max-width: 480px) {
.nutrient-list {
grid-template-columns: 1fr;
}
.nutrient-list dt { grid-column: 1; }
.nutrient-list dd { grid-column: 1; margin-top: 0; }
}
- 不用
text-align: justify或table-layout: fixed—— 容易导致中英文混排时字距崩坏 - 数值单位（如“g”、“mg”、“%NRV”）建议用
<sub>或font-size: 0.85em，但别用<small>（语义错误） - “%NRV”这类标识必须保留原文，不可翻译为“占每日所需比例”，否则违反 GB 28050-2011 标注规范
动态渲染时注意单位与精度的一致性
如果用 JavaScript 渲染（比如从 JSON 接口取值），最容易出错的是单位拼接和小数位处理。例如后端返回 { value: 12.345, unit: "g" }，前端直接 value + unit 会显示“12.345g”，但国标要求碳水/蛋白/脂肪保留 1 位小数，钠保留整数。
- 必须按营养素类型做精度映射：用对象配置
{ "energy": 0, "protein": 1, "sodium": 0, "vitamin_c": 1 } - 单位不能全靠后端传——有些字段（如“能量”）本身无单位，但需同时显示 kJ 和 kcal，得前端计算换算（1 kcal = 4.184 kJ）
- 避免用
Math.round()直接截断：12.96 四舍五入为 13.0，但应显示为 “13.0 g” 而非 “13 g”，保持小数位统一 - “0 g” 要显示，“0.0 g” 是错的；“NRV%” 为 0 时不能省略，必须写 “0%”
打印与 PDF 导出时字体和边框失效怎么办
用户常反馈：网页看着正常，一按 Ctrl+P 打印就错位、单位挤在一起、虚线边框消失。根本原因是浏览器打印样式默认重置了大部分 CSS，且中文字体在 PDF 工具（如 wkhtmltopdf）里常 fallback 到无衬线体，导致宽度突变。
- 必须写
@media print规则，强制指定等宽字体如"Source Han Sans SC", "Noto Sans CJK SC", sans-serif - 避免用
border: 1px dashed做分隔线——打印时可能完全不显示，改用border-bottom: 0.5pt solid #999（注意单位用pt） - 不要依赖 Flex/Grid 的自动换行做打印适配；打印样式里显式设
page-break-inside: avoid在每个<dt>上，防跨页断裂 - 若用 Puppeteer 生成 PDF，需加
--no-sandbox和--font-render-hinting=none参数，否则中文字体宽度计算偏差可达 ±15%
