列表元素一般有三种,有序列表、无序列表,定义列表
有序列表
使用 ol 元素就可以创建一个有序列表,如下所示
html
<ol>
</ol>光有列表还不行,我们还需要列表项,列表项为 li,并且需要注意的是,ol 元素的子元素只能是 li,每一个列表项的内容需要写在 li 内部
html
<ol>
<li>one</li>
<li>two</li>
<li>three</li>
</ol>
由于是有序列表,所以浏览器一般默认会给我们加上一个编号。
这里有序列表的默认编号是 1,2,3 这样,我也可以修改为其他的编号,编号的修改使用 type 属性

从 vscode 的提示中,我们也可以看到,取值有 1, A, a, I, i 五个(后面那些不是),下介绍每一个取值的作用
- 1:使用数字编号
- A:使用大写字母编号(Z 之后会使用 AA)
- a:使用小写字母编号
- i:使用小写罗马数字编号
- I:使用大写罗马数字编号
除此之外,ol 元素下还有一个 reversed 的布尔属性,如果设置 reverse,表示对 ol 中的各个 li 倒序显示
虽然 type 可以控制这里的显示的样式,但是这显然没有做到结构样式相分离,在官方文档里也强调了这一点
所以一般来说我们并不会用到这个 type 属性,将来学习 CSS 的时候会使用 CSS 来控制这一样式。
无序列表
无序列表是网页上用的非常频繁的元素,所以非常重要,无序列表元素为 ul,即 unordered list,其他没有什么区别
html
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
由于无序列表从语义上来说是无序的,所以浏览器一般会给加一个小圆点样式,而非序号。
有序列表和无序列表的区别并不在浏览器默认样式,这里强调过多遍,选用有序列表还是无序列表取决于这个列表是否有序,如果你这个列表是有序的,哪怕它没有编号,也应该使用有序列表,这就是语义化。
无序列表是开发中非常常见的一个元素,菜单,导航条,这些大多数都是无序列表干的。
定义列表
定义列表主要是用于定义一些术语,它和前面两种列表不太一样,但依旧是一个列表,定义列表使用 dl 元素
在 dl 元素中,有两个子元素,分别是 dt 和 dd,分别表示标题和描述
- dl: definition list
- dt: definition title
- dd: definition description
用法如下
html
<dl>
<dt>this is a title</dt>
<dd>XXXXXXXXXXXXXXXXXXX</dd>
<dt>this is a title</dt>
<dd>XXXXXXXXXXXXXXXXXXX</dd>
<dt>this is a title</dt>
<dd>XXXXXXXXXXXXXXXXXXX</dd>
<dt>this is a title</dt>
<dd>XXXXXXXXXXXXXXXXXXX</dd>
</dl>用法就是这样,显示效果如下 
定义列表使用的并不多,通常用于一些文献里面,要定义一些术语,就可以使用定义列表。
