HTML定义列表怎么用_HTML dl/dt/dd标签定义列表制作

HTML定义列表通过dl、dt、dd标签实现术语与解释的对应，其中dl为容器，dt定义术语，dd提供描述，适用于名词解释、参数说明等场景，语义清晰且利于SEO和无障碍访问。

HTML定义列表用于展示术语与解释之间的对应关系，主要通过dl、dt和dd三个标签配合使用。它不同于有序和无序列表，更适合用来做名词解释、参数说明等场景。

1. dl 标签：定义列表容器

dl 是 definition list 的缩写，作为整个定义列表的外层容器，所有 dt 和 dd 都要放在 dl 里面。

基本结构如下：

<dl>
  <dt>术语1</dt>
  <dd>解释1</dd>
  <dt>术语2</dt>
  <dd>解释2</dd>
</dl>

2. dt 标签：定义术语

dt 表示“definition term”，即要解释的术语或关键词。它可以出现多次，每个 dt 代表一个条目名称。

立即学习“前端免费学习笔记（深入）”；

例如：

<dt>HTML</dt>
<dt>CSS</dt>

注意：dt 里不能包含块级元素，通常只放文字或内联元素。

3. dd 标签：描述定义内容

dd 是“definition description”的缩写，用于对前面 dt 中的术语进行描述或解释。

爱图表

AI驱动的智能化图表创作平台

99

查看详情

每个 dd 会自动缩进显示，浏览器默认为其添加一定的左边距。

你可以为一个 dt 添加多个 dd，表示该术语有多种解释或用途：

<dt>JavaScript</dt>
<dd>一种网页脚本语言</dd>
<dd>可用于实现页面交互功能</dd>

4. 实际应用示例

比如做一个常见网络术语的解释列表：

<dl>
  <dt>HTTP</dt>
  <dd>超文本传输协议，用于客户端与服务器之间传输网页数据</dd>

  <dt>DNS</dt>
  <dd>域名解析系统，将域名转换为IP地址</dd>
</dl>

这段代码会在页面上以清晰的术语-解释形式展示内容，语义明确，利于SEO和屏幕阅读器识别。

基本上就这些。合理使用 dl、dt、dd 能让信息结构更清晰，特别是在制作帮助文档、配置说明或词典类页面时非常实用。