定义列表（dl、dt、dd）用于构建术语与定义的语义化结构，其中dl为容器，dt表示术语，dd描述解释，支持一个dt对应多个dd或多个dt共享一个dd，适用于词汇表、FAQ等场景，相比ul/ol列表更强调配对关系而非简单条目罗列，结合css可实现美观且可访问的布局，提升用户体验。
定义列表（
dl
、
dt
、
dd
）在html中用于表示一组术语及其定义。核心用法是，
<dl>
标签作为整个定义列表的容器，其中包含一个或多个
<dt>
标签（定义术语，Definition Term）和紧随其后的一个或多个
<dd>
标签（术语描述，Definition Description）。它能非常清晰地构建出“是什么”与“解释是什么”这样的结构，远比你想象的更有语义价值。
解决方案
创建定义列表其实非常直观，关键在于理解每个标签的职责。
dl
标签包裹着整个定义列表，就像一个大盒子。在这个盒子里面，你每提出一个“术语”或“问题”，就用一个
dt
标签包起来。紧接着，对这个术语或问题的“解释”或“答案”，就用一个
dd
标签来承载。这种结构天然地适合展示词汇表、FAQ（常见问题解答）、元数据对，甚至是一些配置项的说明。
举个最简单的例子：
<dl> <dt>HTML</dt> <dd>超文本标记语言（HyperText Markup Language），是用于创建网页的标准标记语言。</dd> <dt>CSS</dt> <dd>层叠样式表（Cascading Style Sheets），是一种样式表语言，用于描述HTML或XML文档的呈现。</dd> </dl>
你看，每个
dt
和
dd
都是一对，清晰明了。它不仅仅是视觉上的缩进，更重要的是它告诉浏览器和屏幕阅读器：“嘿，这里有一个术语，后面跟着它的解释！” 这对于可访问性和搜索引擎优化都有着不小的贡献。
定义列表与普通列表有何本质区别？
这可能是初学者最容易混淆的地方。我们有无序列表
ul
和有序列表
ol
，它们看起来也能列出一些东西，甚至通过CSS调整后，视觉效果可能与定义列表相似。但它们在语义上，是截然不同的。
ul
ol
（Ordered List）是用来表示一系列相关联的“项”或“条目”的。
ul
强调这些项之间没有特定的顺序，比如购物清单、菜单项；
ol
则强调这些项有特定的顺序或步骤，比如食谱的步骤、排行榜。它们的结构是
<ul><li>item</li></ul>
或
<ol><li>item</li></ol>
，每个
li
都是一个独立的列表项。
而
dl
的核心在于“定义”或“描述”关系。它不是简单地列出一些东西，而是明确地表达“这个术语是那个解释”的配对关系。每个
dt
都是一个“主题”或“名称”，而紧随其后的
dd
则是对这个主题的“内容”或“值”。你可以把它想象成一本字典，每个词条（
dt
）后面都跟着它的释义（
dd
）。这种语义上的精确性，使得定义列表在表示结构化数据时，比普通列表更具优势。如果你用
ul
来模拟定义列表，虽然视觉上可能勉强过关，但屏幕阅读器和搜索引擎会把它当成一堆没有明确关联的独立项，这就失去了它本该有的意义。
一个
<dt>
<dt>
可以对应多个
<dd>
吗？反之呢？
当然可以，而且这是
dl
标签非常灵活和实用的一个特性。
一个
<dt>
对应多个
<dd>
： 这种情况非常常见，比如一个术语可能有多个不同的定义，或者一个问题需要多段详细的解释。HTML标准完全支持这种结构。
<dl> <dt>前端开发</dt> <dd>指网站或应用程序中用户直接与之交互的部分，主要涉及HTML、CSS和JavaScript。</dd> <dd>也泛指负责构建和维护这些用户界面的工程师。</dd> <dt>HTTP 状态码 200</dt> <dd>表示请求已成功，客户端请求的资源已在响应体中返回。</dd> <dd>这是最常见的成功状态码。</dd> </dl>
这里，“前端开发”这个术语就有了两层含义或解释，通过两个
dd
标签清晰地展现出来。这比把所有内容硬塞到一个
dd
里，结构上要清晰得多。
多个
<dt>
对应一个
<dd>
： 这种情况虽然不如前者常见，但在某些场景下也很有用，比如你有几个同义词，但它们共享同一个定义；或者几个不同的问题，却指向同一个答案。
<dl> <dt>bug</dt> <dt>缺陷</dt> <dt>错误</dt> <dd>在软件或系统中存在的，导致其行为不符合预期的问题。</dd> <dt>如何重置密码？</dt> <dt>忘记密码了怎么办？</dt> <dd>请点击登录页面的“忘记密码”链接，根据提示操作即可。</dd> </dl>
在这个例子中，“Bug”、“缺陷”和“错误”这三个术语都指向了同一个定义。同样，“如何重置密码？”和“忘记密码了怎么办？”这两个问题，也共享了同一个解决方案。这种灵活性使得
dl
在处理复杂信息结构时，能够保持语义的准确性和内容的简洁性。
如何通过CSS美化定义列表，提升用户体验？
默认的定义列表样式通常只是简单的缩进，视觉上可能不够吸引人，也不够清晰。通过CSS，我们可以对其进行美化，使其更具可读性和视觉层次感。
最基础的美化通常包括调整间距、字体样式和颜色。
dl { margin: 1em 0; padding: 0; border-left: 3px solid #007bff; /* 左侧加个边框，增加视觉焦点 */ background-color: #f8f9fa; /* 背景色 */ padding-left: 15px; /* 内部左边距 */ } dt { font-weight: bold; /* 术语加粗 */ color: #343a40; /* 术语颜色 */ margin-top: 1em; /* 与上一个dd或dt的间距 */ margin-bottom: 0.5em; /* 与dd的间距 */ font-size: 1.1em; /* 稍微大一点 */ } dd { margin-left: 20px; /* 描述内容缩进 */ margin-bottom: 1em; /* 与下一个dt的间距 */ line-height: 1.6; /* 行高，提高可读性 */ color: #6c757d; /* 描述颜色 */ } /* 针对第一个dt，去除顶部间距，避免列表顶部留白过多 */ dt:first-of-type { margin-top: 0; }
更高级一点的布局，比如让
dt
和
dd
在同一行显示，或者实现两列布局，可以利用CSS Grid或Flexbox。
使用Flexbox实现两列布局： 如果你想让术语和定义像表格一样对齐，Flexbox是个不错的选择。
dl.grid-layout { display: flex; flex-wrap: wrap; /* 允许换行 */ margin: 1em 0; border: 1px solid #dee2e6; padding: 15px; background-color: #fff; } dl.grid-layout dt { flex: 0 0 150px; /* dt 固定宽度 */ font-weight: bold; color: #0056b3; padding: 5px 10px; box-sizing: border-box; text-align: right; /* dt 右对齐 */ border-right: 1px solid #dee2e6; /* dt 和 dd 之间加分隔线 */ } dl.grid-layout dd { flex: 1; /* dd 占据剩余空间 */ margin-left: 0; /* 移除默认的margin-left */ padding: 5px 10px; box-sizing: border-box; border-bottom: 1px dashed #e9ecef; /* dd 之间加虚线 */ } /* 最后一个dd去除底部边框 */ dl.grid-layout dd:last-of-type { border-bottom: none; } /* 确保每个dt和它后面的dd在视觉上是成对的 */ /* 这需要更复杂的选择器或者更细致的HTML结构调整，这里仅作示意 */ /* 比如，如果你想让每个dt-dd对占据一行，可以这样： */ dl.inline-pair { display: grid; grid-template-columns: auto 1fr; /* 第一列自动宽度，第二列填充剩余空间 */ gap: 5px 10px; /* 行间距和列间距 */ margin: 1em 0; } dl.inline-pair dt { font-weight: bold; text-align: right; padding-right: 10px; } dl.inline-pair dd { margin-left: 0; /* 移除默认的margin-left */ }
通过这些CSS技巧，你可以让你的定义列表在视觉上更具吸引力，更好地引导用户阅读和理解内容。记住，样式只是辅助，核心还是在于
dl
标签本身所承载的语义价值。
