必须用 ，因参数对比是二维关系， 仅支持一维映射，无法横向对齐与语义化列关联；需用 、 标签、max-width+text-overflow+word-break 组合及 @media 竖排卡片等确保可访问性、seo 与响应式。

商品参数表该用

还是

？

必须用 <table>，不用 <code><dl></dl>。参数对比本质是二维关系——“哪款商品在哪个参数上是什么值”，<dl></dl> 只能表达“参数名→参数值”的一维映射，无法横向对齐“A 的内存”和“B 的内存”，屏幕阅读器也读不出列关联。

常见错误是把所有参数塞进一个两列 <dl></dl>：左边 <dt></dt> 写“颜色”，右边 <dd></dd> 塞“红 / 蓝 / 黑”，结果复制时粘贴成乱码，SEO 抓不到结构，JS 也没法按列筛选。

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

• <th scope="row"> 必须加在参数名单元格上，否则辅助技术不知道“第三行第二列”对应的是“电池容量”还是“重量” <li>每条参数独占一行 <code><tr>，不合并行（<code>rowspan）或列（colspan），避免后续增删参数时错位
• 不要用 <caption></caption> 做装饰性标题，它会被读屏软件当作表格唯一说明，应写成“iPhone 15 与 Pixel 8 核心参数对比”这类具体描述

多值参数（如颜色、尺寸）怎么写才不崩布局？

别在 <td> 里直接写“红色, 蓝色, 黑色”，换行符、逗号、空格都会干扰复制、翻译和 JS 解析。正确做法是用 <code><data></data> 标签包裹每个可选项，value 属性存标准编码，视觉用 • 分隔。

示例：<td> <data value="red">红色</data> • <data value="blue">蓝色</data> • <data value="black">黑色</data> </td>

• <data></data> 是语义化标签，比 <span></span> 更利于机器识别，搜索引擎能索引 value 值
• 禁止用 <br> 或 CSS white-space: pre-line 换行——屏幕阅读器会念出“换行”，用户听不出这是三个独立选项
• 如果某参数只适用于部分商品（如“5G 支持”对 4G 版不适用），填“不支持”或“-”，别留空，否则 colspan 错位风险高

长参数文本（如芯片型号）怎么截断又不失可读性？

单靠 white-space: nowrap 会导致整列被撑宽甚至横向滚动；只设 width 又会让小屏上文字溢出。真正起效的是三行组合：

.param-table td, .param-table th {
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  word-break: break-word;
}

• max-width 控制单格宽度上限，防止某列（如“处理器”）独大挤掉其他列
• text-overflow: ellipsis 必须配合 white-space: normal 才生效，很多人漏掉后者导致省略号不显示
• word-break: break-word 确保中文长词（如“高通骁龙 8 Gen 3（4nm 工艺，主频 3.3GHz）”）能折行，而不是整个字符串卡在末尾

移动端怎么避免横向滚动还保持语义？

给 <table> 加 <code>overflow-x: auto 是最懒的解法，用户得手动拖，还容易误触缩放。真正在意体验的做法是：小屏下把表格“竖过来”，每款商品变成一个垂直卡片，但 DOM 结构仍在 <table> 内。 <p>关键不是隐藏列，而是用 <code>@media 重排逻辑：<tbody class="spec-group"> 包一组参数，配合 <code>aria-hidden="true" 和 inert 控制显隐，比纯 display: none 更可靠——打印样式、爬虫解析、屏幕阅读器反馈全保留。

• 折叠区域不能抽离成 <div> 再动态插入，否则表格语义断裂，<code><th scope="col"> 和 <code><td> 的行列关系就丢了 <li>JS 控制展开时，必须同步切换 <code>aria-expanded 和 aria-controls，否则 VoiceOver 用户点开没语音反馈
• 禁用 border-collapse: collapse，改用 border-spacing 分隔商品卡片，避免边框粘连影响视觉分组
表格语义一旦写错，后续加响应式、导出 PDF、接入无障碍工具都会连锁翻车。最常被忽略的不是样式，而是 scope 属性是否准确、<data></data> 是否用了、inert 是否替代了 display: none——这些细节不调试到真机+读屏软件里，根本看不出问题。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！