dl 标签不是自定义列表，而是专用于术语与解释的成对关系；应使用 ul/ol 加 CSS ::marker 或 background-image 实现视觉定制，确保语义正确和可访问性。

HTML 里没有“自定义列表”这个标准概念，dl 标签也不是用来做项目符号或编号列表的 —— 它专用于定义术语与解释的成对关系，强行当 ul 或 ol 用会破坏语义、影响可访问性，还容易被屏幕阅读器误读。

为什么 dl 不是“自定义列表”

dl（description list）的语义非常明确：它只描述「术语–定义」结构，比如词典条目、参数说明、FAQ 问答。浏览器和辅助技术都按此逻辑解析：

• dt 表示一个术语（definition term），必须有内容，不能空
• dd 表示对该术语的解释（definition description），可多个连续出现，但必须紧跟在 dt 后
• 不支持 start、type、reversed 这类 ol/ul 的属性
• CSS 中 list-style 对 dt/dd 默认无效，需手动重置 margin 和 padding

想实现带图标/数字/文字前缀的“自定义列表”，该用什么

真正需要的是视觉可定制、语义正确的列表 —— 正确路径是：ul 或 ol + CSS ::marker 或 background-image：

• 用 ul 表示无序内容（如功能亮点、配置项），配合 list-style: none + ::marker 自定义符号
• 用 ol 表示步骤、优先级等有序内容，支持 counter-reset/counter-increment 实现复杂编号（如 “Step 1.2”）
• 若需图标前缀，优先用 background-image 或 ::before + 字体图标（如 font-family: "iconfont"），避免用 img 标签塞进 li 破坏语义
• 别为了“看起来像自定义列表”而套用 dl —— 搜索引擎和读屏软件不会理解你的“创意用法”

dl 的正确使用场景和写法

只有当你明确要表达「名称–说明」的映射关系时，才用 dl。常见且合规的写法如下：

使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审

使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。

下载

HTTP Status Code

A three-digit code indicating the result of an HTTP request.

404 Not Found

The server cannot find the requested resource.

Often returned when a URL is mistyped or a page has been removed.

注意点：

• 每个 dt 至少对应一个 dd；多个 dd 可并列解释同一个术语
• 不要把 dl 当容器包 div 用（比如里面塞 p、h3 而不套 dt/dd）
• 响应式布局中，dl 建议用 CSS Grid 实现术语左对齐、解释右对齐（display: grid; grid-template-columns: max-content 1fr），比浮动更可靠

兼容性和可访问性陷阱

dl 在旧版 IE（≤IE8）中对 dd 的缩进处理不一致，但现代项目基本无需考虑。真正容易被忽略的是可访问性细节：

• 屏幕阅读器读 dl 时，会明确播报 “term: … definition: …”，所以 dt 内容必须简洁准确（比如写 “API Key” 而不是 “Your secret key for accessing the service”）
• 如果把 dl 用在表单说明中（如
  Email
  ），务必给 input 加 id 并用 aria-labelledby 关联，否则语义链断裂
• 不要用 dl 替代 table 做多维数据展示（如“参数名｜类型｜必填｜说明”），这种场景应严格用 table + th + scope

语义不是教条，但错用 dl 换来的那点样式自由，远不如一次正确的结构选择带来的长期维护收益和无障碍支持。真正难的不是怎么“自定义”，而是先分清：你要的到底是“列表”，还是“定义”。

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