参考资料

1. HTML 提示
2. html表格标签详细说明以及案例
3. HTML 内部样式表
4. HTML 文本对齐方式
5. Html转ASP/Perl有哪些
6. HTML使用表格 布局
7. HTML 使用 Class 与 ID 的差异
8. HTML 来显示目录链接页面使用 iframe

HTML 自定义列表

介绍

HTML 自定义列表（Description List）用于创建术语及其描述的列表，通常用于词汇表、元数据展示等场景。

标签

• <dl>：定义自定义列表

• <dt>：定义列表中的术语/名称

• <dd>：定义术语的描述

用法

<dl>
  <dt>术语1</dt>
  <dd>描述1</dd>
  <dt>术语2</dt>
  <dd>描述2</dd>
</dl>

实例

<dl>
  <dt>HTML</dt>
  <dd>超文本标记语言，用于创建网页结构</dd>
  <dt>CSS</dt>
  <dd>层叠样式表，用于控制网页表现</dd>
  <dt>JavaScript</dt>
  <dd>脚本语言，用于实现网页交互功能</dd>
</dl>

功能

• 展示术语及其定义

• 显示名称-值对

• 组织元数据

• 创建问答列表

CSS 扩展

/* 基本样式 */
dl {
  margin: 1em 0;
}

dt {
  font-weight: bold;
  margin-top: 1em;
}

dd {
  margin-left: 2em;
  margin-bottom: 1em;
}

/* 水平排列样式 */
dl.horizontal {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0 1em;
}

dl.horizontal dt {
  grid-column: 1;
}

dl.horizontal dd {
  grid-column: 2;
  margin-left: 0;
}

/* 分组样式 */
dl.grouped dt {
  background-color: #f5f5f5;
  padding: 0.5em;
}

dl.grouped dd {
  padding: 0.5em 1em;
  border-left: 3px solid #ddd;
}