dl dt dd标签

HTML

用来搭建网页结构的标记语言。

CSS

用来控制网页外观的样式语言。

表格

标签 全称 作用

‌ definition list ‌外层容器‌,包住整组内容 ‌ definition term ‌被解释的名词‌(术语、标题、字段名)

``‌ definition description ‌对该名词的说明‌

关键认知:dt 和 dd 是"兄弟",不是"父子"。‌ 它们‌都直接挂在 `` 下面‌,是‌平级‌关系,不是"三级嵌套"。这一点搞反了(比如把 dd 写进 dt 里面)结构就不合法。

二、默认行为(必须知道,否则一定踩坑)

这三个都是‌块级元素‌,且浏览器给了默认样式:

表格

元素 默认样式

dl display: block,上下有约 1em 外边距

dt display: block,‌无缩进‌,字重正常

dd display: block,‌默认缩进 40px‌(margin-left: 40px)

那个坑就是 dd 的 40px 缩进‌------你写完发现"解释文字莫名其妙往右缩进去了",就是它。去掉很简单:

css

dd { margin-left: 0; }

dl 上下的多余间距和 dt 的字重,也常要一起重置:

css

dl { margin: 0; }

dd { margin-left: 0; }