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; }