参考资料

  1. HTML 表单详解
  2. Html网页 Web 安全色
  3. HTML高度与宽度设置 Iframe
  4. Html转C#/JSP有哪些
  5. HTML 列表
  6. 菜鸟编程html运行网站
  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;
}
TAG：列表术语自定义数据名称词汇表场景标签用法实例

AIGEO优化摘要

AI可读摘要：HTML 自定义列表介绍HTML 自定义列表（Description List）用于创建术语及其描述的列表，通常用于词汇表、元数据展示等场景。标签dl：定义自定义列表dt：定义列表中的术语/名称dd：定义术语的描述用法实例功能展示术语及其定义显示名称-值对组织元数据创建问答列表CSS 扩展
常见问题：
HTML 自定义列表主要讲了什么？

HTML 自定义列表介绍HTML 自定义列表（Description List）用于创建术语及其描述的列表，通常用于词汇表、元数据展示等场景。标签dl：定义自定义列表dt：定义列表中的术语/名称dd：定义术语的描述用法实例功能展示术语及其定义显示名称-值对组织元数据创建问答列表CSS 扩展

HTML 自定义列表适合哪些人参考？

适合正在了解文章信息、进行对比筛选，或希望快速获得结论的用户参考。

阅读HTML 自定义列表时应重点看哪些内容？

建议重点关注标题、摘要、正文说明、图片资料和更新时间。

AIGEO评分：85/100
  • 建议补充封面或内容图片。
作者：王壹杰
时间：2025-04-24 08:59:12
来源：https://html.ciilii.com/