参考资料

1. html排版标签详细说明以及案例
2. HTML 视频(Videos)播放
3. HTML无序列表
4. HTML 使用 Class 与 ID 的差异
5. HTML 预期格式文本
6. http-equiv="expires" 模拟 HTTP 头部中的 Expires 字段
7. HTML 表格空间
8. 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;
}

声明：本站所有文章资源内容，如无特殊说明或标注，均为采集网络资源。如若本站内容侵犯了原著者的合法权益，可联系本站删除。