参考资料

1. HTML 块引用格式化
2. HTML "计算机输出"标记
3. HTML 布局
4. HTML 删除字符效果和插入字符效果
5. HTML 图像
6. HTML 来显示目录链接页面使用 iframe
7. HTML 用于著作标题的
8. HTML 用于双向重写

HTML 自定义列表

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;
}