dl 是 html 中唯一原生表达「名称–值」语义的标签，适用于商品参数等术语与解释映射关系，需配合 dt/dd 使用，避免嵌套 div/p 或滥用 ul/表格。
dl 标签没有参数，它不接受 type、start、reversed 这类列表控制属性——它只负责包裹语义成对的术语与解释，其余全靠 dt 和 dd 配合实现结构。
商品详情页里为什么用 dl 而不是 ul 或表格
因为商品参数（如“屏幕尺寸”“防水等级”“电池容量”）天然是一组「名称–值」映射关系，dl 是 HTML 中唯一原生表达这种语义的标签。搜索引擎能识别这是结构化参数，读屏器会按术语→解释顺序朗读，而 ul 只表示“并列项目”，表格则引入冗余标签和复杂嵌套。
常见错误现象：用 ul + li 套两层 span 模拟“标题+内容”，结果 SEO 无法提取字段，残障用户只能听到“列表项一、列表项二……”，完全丢失语义。
- 必须确保每个
dt后紧跟至少一个dd，不能空着 - 多个同义参数（如“IP68”“生活防水”）可共用一个
dd，但要写成多个dt+ 一个dd，而非反过来 - 避免在
dl里塞div或p——dt和dd必须是dl的直接子元素
dl 在商品页中怎么写才不塌陷、不挤在一起
浏览器默认只给 dd 设了 margin-left，现代 CSS 重置（如 Normalize.css）常把它清零，导致视觉上“术语和解释贴在一起”。这不是 bug，是设计使然——dl 本就不该依赖缩进传达结构。
推荐做法是用轻量 CSS 微调间距和对齐，而不是强行模拟缩进：
- 先加基础间距：
dd { margin-top: 0.25em; } - 需要左对齐术语、右对齐值（如文档页常见排版）：
dl { display: grid; grid-template-columns: max-content 1fr; gap: 0 1rem; }+dt { font-weight: 600; } - 响应式断点下改单列：
@media (max-width: 768px) { dl { display: block; } dt, dd { display: block; } }
别用 text-indent 或 padding-left 硬推 dd，那会破坏语义流，且在窄屏下容易溢出。
哪些商品信息适合放进 dl，哪些不该塞
dl 只适合表达明确的「一对一或一对多」术语定义关系。它不是万能容器，硬塞会污染语义。
- ✅ 适合：
dt写“操作系统”，dd写“HarmonyOS 4.2”；dt写“充电功率”，dd写“支持 66W 有线快充” - ❌ 不该塞：
dt写“包装清单”，dd里再放一个ul列充电线、说明书、卡针——这已超出定义关系，应拆成独立区块 - ⚠️ 边界情况：“售后服务”后面跟一段段落文字？可以，但
dd内容应保持单一解释性，若含步骤、条件、链接等复杂结构，建议改用section+h3
最易被忽略的一点：很多人给 dl 加 class 如 class="spec-list"，却忘了同步加 aria-label 或 role="region" 来辅助读屏器理解上下文——尤其当页面存在多个 dl 时，光靠视觉位置无法判断哪个是参数、哪个是售后条款。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
