html5中dl、dt、dd是专为术语与解释配对设计的语义化标签：dl为容器，dt写术语，dd写解释；支持一词多义或多词一义；适用于术语表、faq、配置文档等场景。
- 、
- 和
- 是HTML5中专为术语与解释配对设计的语义化标签，用它们构建词条列表，不只是视觉整齐，更能让屏幕阅读器准确识别“哪个是词、哪个是释义”，对SEO和无障碍访问都有实质帮助。
明确各标签职责，不混用也不嵌套错
dl是容器，必须包裹所有条目；dt只写术语本身，比如“API”“DOM”“响应式设计”；dd紧接在对应dt之后，专门放解释内容。
常见错误要避开：
- dt里不要塞
或
——它本就支持、这类行内元素，加块级标签会干扰读屏器解析 <li>dd不能放在dt里面，dt也不能放在dd里面——它们是并列的兄弟关系，都直接属于dl</li> <li>一个dt后面可以跟多个dd，比如一个术语有“定义”“用途”“示例”三段说明，就写三个dd，别挤在一个dd里用<p>分段</p> </li> <h3>合理组织多义项与复合结构</h3> <p>有些术语存在多种含义或使用场景，比如“闭包”在JavaScript和数学中意思不同。这时可用一个dt配多个dd：</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill7761" title="Article To Html"><img src="https://img.php.cn/upload/skill/000/000/081/179168408018805.jpg" alt="Article To Html" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill7761" title="Article To Html" class="overflowclass">Article To Html</a> <p class="overflowclass">文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。</p> </div> <a rel="nofollow" href="/xiazai/skill7761" title="Article To Html" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> <p></p> <dt>闭包</dt> <br><dd>JavaScript中，函数与其词法环境的组合，可访问外部作用域变量。</dd> <br><dd>数学中，集合在某种运算下保持封闭的性质。</dd> <p>若多个术语共用同一解释（如“HTML”“CSS”“JS”都属于“前端核心技术”），可连续写多个dt，再跟一个dd：</p> <p></p> <dt>HTML</dt> <br><dt>CSS</dt> <br><dt>JavaScript</dt> <br><dd>构成现代网页开发的三大基础技术。</dd> <h3>用CSS微调，兼顾清晰与美观</h3> <p>浏览器默认给dd加了左边距实现缩进，但你可以优化得更专业：</p> <ul> <li>给dt加<font color="blue">border-bottom: 1px solid #eee</font>，形成视觉分隔线</li> <li>用<font color="blue">margin-top: 1.2em</font>控制每个dt之间的间距，避免堆砌感</li> <li>dd设置<font color="blue">margin-left: 1.5em</font>替代默认值，配合字体颜色#444提升可读性</li> <li>整个dl加<font color="blue">background: #fafafa; padding: 16px; border-radius: 4px</font>，让词条区域更聚焦</li> </ul> <h3>适用场景不止于名词解释</h3> <p>dl标签天然适合表达“名称-描述”这一对一或多对一关系，所以除了术语表，还能用于：</p> <ul> <li>FAQ页面：dt写问题（“如何重置密码？”），dd写答案</li> <li>配置文档：dt写参数名（“timeout”），dd写类型、默认值、说明</li> <li>联系信息：dt写“邮箱”“电话”，dd写对应联系方式</li> <li>产品规格：dt写“尺寸”“重量”，dd写具体数值和单位</li> </ul> 不复杂但容易忽略
- dt里不要塞
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
