该用时仅限术语与解释、参数与说明等成对映射关系，如API文档、简历技能、词典条目；误用于步骤或纯文本会损害可访问性与SEO。
dl 不是“定义列表”而是“描述列表”，语义上更宽泛，能表达名词-解释、参数-说明、技能-熟练度等映射关系；用错场景或嵌套结构不合法，会导致可访问性工具误读、SEO 降权或屏幕阅读器跳过内容。
什么时候该用 dl 而不是 ul 或 ol
当你有一组「成对出现的术语与解释」，且二者存在明确归属关系时才用 dl。比如 API 文档里的参数名和说明、简历中的技能项与掌握程度、词典条目。
- ✅ 正确：一个
dt对应一个（或多个连续）dd，表示“这个术语有这些解释” - ❌ 错误：把步骤、时间线、纯文本段落强行塞进
dl—— 这属于语义滥用，浏览器和辅助技术无法正确推断逻辑顺序 - ⚠️ 注意：
dt不能空着，也不能只放图标或空格；dd可以为空，但实际项目中几乎不该出现
dt 和 dd 的嵌套限制与常见错误
dt 和 dd 必须直接作为 dl 的子元素，中间不能插入 div、p 或其他包裹标签。否则 HTML 解析器会自动修正 DOM 结构，导致样式错乱或语义断裂。
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- ❌ 错误写法：
- name
- string
div提到dl外，dt/dd孤立在文档流中 - ✅ 正确写法：
- name
- string
dl并列 - ⚠️ 多个
dt共享一个dd是合法的（例如同义词共用解释），但反过来——一个dt后跟多个dd——也合法，只是要确保它们真属于同一术语的不同侧面
默认样式简陋，但重置时别破坏语义流
浏览器对 dl 的默认渲染就是缩进 + 换行，视觉上接近无序列表，所以几乎所有项目都要加 CSS。但改样式时容易踩两个坑：
- 别用
display: flex或grid直接作用于dl，否则可能让dt和dd在可访问性树中失去父子关联 - 别给
dd设margin-left: 0就完事——它默认是块级且带左缩进，清掉后若没补替代视觉区分（比如加border-left或背景色），普通人根本看不出哪段属于哪个术语 - 推荐最小安全重置：
dl { display: grid; grid-template-columns: max-content 1fr; gap: 0.25em 1em; }+dt { font-weight: 600; }+dd { margin: 0; }
真正难的是判断一组内容是否构成「描述关系」——这没法靠工具检测，得靠人读。很多团队用 dl 做响应式两栏布局，结果被 axe 扫出严重可访问性问题，就因为屏幕阅读器把 dt 当作“可跳转标题”，而实际那里只是个图标或空占位符。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
