编辑“︁HTML定义列表”︁

= HTML定义列表 =

'''HTML定义列表'''（Definition List）是HTML中用于展示术语及其对应定义的列表结构，通常用于词汇表、FAQ或任何需要成对展示名称与解释的场景。与无序列表（<code><nowiki><ul></nowiki></code>）和有序列表（<code><nowiki><ol></nowiki></code>）不同，定义列表通过语义化的标签明确区分术语（term）和描述（description）。

== 基本语法 ==
定义列表由三个核心标签组成：
* <code><nowiki><dl></nowiki></code>：定义列表的容器。
* <code><nowiki><dt></nowiki></code>：定义术语（Definition Term），表示被解释的词汇或短语。
* <code><nowiki><dd></nowiki></code>：定义描述（Definition Description），提供术语的详细说明。

=== 代码示例 ===
<syntaxhighlight lang="html">
<dl>
    <dt>HTML</dt>
    <dd>超文本标记语言，用于创建网页结构。</dd>
    <dt>CSS</dt>
    <dd>层叠样式表，控制网页的视觉表现。</dd>
</dl>
</syntaxhighlight>

'''输出效果：'''
<dl>
    <dt>HTML</dt>
    <dd>超文本标记语言，用于创建网页结构。</dd>
    <dt>CSS</dt>
    <dd>层叠样式表，控制网页的视觉表现。</dd>
</dl>

== 进阶用法 ==
=== 多术语对应单一描述 ===
一个描述可以关联多个术语，适用于同义词或缩写场景：
<syntaxhighlight lang="html">
<dl>
    <dt>WWW</dt>
    <dt>World Wide Web</dt>
    <dd>全球互联网信息系统的统称。</dd>
</dl>
</syntaxhighlight>

=== 多描述对应单一术语 ===
一个术语可以有多个补充说明：
<syntaxhighlight lang="html">
<dl>
    <dt>JavaScript</dt>
    <dd>一种脚本编程语言。</dd>
    <dd>通常用于网页交互功能开发。</dd>
</dl>
</syntaxhighlight>

== 实际应用案例 ==
=== 场景1：技术文档词汇表 ===
<syntaxhighlight lang="html">
<dl>
    <dt>API</dt>
    <dd>应用程序编程接口，允许软件组件互相通信。</dd>
    <dt>DOM</dt>
    <dd>文档对象模型，表示网页的树状结构。</dd>
</dl>
</syntaxhighlight>

=== 场景2：FAQ页面 ===
<syntaxhighlight lang="html">
<dl>
    <dt>如何学习HTML？</dt>
    <dd>从基础标签开始，逐步实践项目。</dd>
    <dt>需要哪些工具？</dt>
    <dd>文本编辑器（如VS Code）和浏览器即可。</dd>
</dl>
</syntaxhighlight>

== 可视化结构 ==
使用Mermaid展示定义列表的DOM结构：
<mermaid>
graph TD
    DL[dl] --> DT1(dt)
    DL --> DD1(dd)
    DL --> DT2(dt)
    DL --> DD2(dd)
    DT1 -->|术语1| DD1
    DT2 -->|术语2| DD2
</mermaid>

== 样式定制 ==
通过CSS可以增强定义列表的视觉效果。例如实现水平排列：
<syntaxhighlight lang="css">
dl {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.5rem 2rem;
}
dt {
    grid-column: 1;
    font-weight: bold;
}
dd {
    grid-column: 2;
}
</syntaxhighlight>

== 注意事项 ==
* 语义化：优先用于术语-描述场景，而非普通列表。
* 无障碍：屏幕阅读器会明确区分<code><nowiki><dt></nowiki></code>和<code><nowiki><dd></nowiki></code>。
* 嵌套：支持在<code><nowiki><dd></nowiki></code>内嵌套其他列表或HTML元素。

== 数学公式示例（可选） ==
若需展示术语的权重计算，可使用公式：
<math>
w(t) = \frac{df(t)}{N}
</math>
其中<math>df(t)</math>是术语出现次数，<math>N</math>是总术语数。

== 总结 ==
HTML定义列表通过<code><nowiki><dl></nowiki></code>、<code><nowiki><dt></nowiki></code>和<code><nowiki><dd></nowiki></code>的配合，提供了语义化的内容组织方式，特别适合需要精确关联术语与定义的场景。

[[Category:编程语言]]
[[Category:HTML]]
[[Category:HTML列表与表格]]