这节课 来学习自定义列表。先来看个例子 小米官网 (https://www.mi.com/) 的底部导航 每个列表都有一个独特特点， 除了列表内容外， 还蕴含一个题目， 咱们就把相似这样的列表 ， 称为自定义列表。
自定义列表由三个标签组成， 别离是： dl dt 和 dd dl 是 definition list 的缩写 意为定义 列表dt 是 definition term 的缩写 意为定义术语 能够了解为列表题目。dd 是 definition description的缩写 意为定义形容 能够了解为列表内容 三个标签都遵循双标签语法。
语法如下图：留神 dt 和 dd 是 dl 的子标签。dt 与 dd 是兄弟标签，dt 不能放入 dd 内 dd也不能放入 dt 内 dd标签能够定义多个 但dt 或 dd 标签不能脱离 dl 独自应用。
再次来到小米官网的底部导航 在浏览器页面上 单击鼠标右键 抉择， 查看， 关上开发者工具， 抉择 elements 页签 ， 点击元素抉择工具按钮， 点击选中你要查看的元素， 在 elements 中你就能看到抉择区域的代码。
仔细观察 dl 标签下 定义了一个dt 和三个 dd 别离展现了一个列表题目和三个列表形容。咱们来入手制作一个自定义列表关上编辑器 新建一个 definition_list_1.html 页面 应用 ! 配合 tab 键主动补全根底代码在 body 里书写 dl ， 按下 tab 键补全 dl 标签， 在 dl 标签外部， 敲回车， 换行， 书写 dt， 按下 tab或者是回车键主动补全 dt， 在 dt 的完结标签内部， 回车换行， 在下边再定义一个 dd 标签，dt 标签里书写文本问：英文不好能不能学编程dd 标签里书写文本 答：当然能够， 保留。在浏览器关上页面， 自定义列表实现了， 这里咱们发现， dd 里蕴含的文本缩进了， 这个缩进是浏览器默认的款式。
再来实现一下小米官网的底部导航！回到编辑器， 新建 definition_list_2.html 页面， 补全根底代码， 在body外面书写一个 dl 标签 在 dl 中书写一个 dt 标签， 向 dt 标签中填写文本， 帮忙核心 ，再书写三个 dd 标签， 别离在每个 dd 中输出文本， 账户治理， 订单指南， 订单操作， 保留
在浏览器关上页面， 根本的自定义列表实现了。和实在的成果做个比照， 咱们发现这两处文字的大小是不同的 而咱们的是雷同的， 同时， 这里的内容没有缩进， 而咱们的有缩进， 这些问题等到咱们学习了CSS常识后， 就能够实现了。
配套视频链接