当前位置：首页 > news >正文

前端成长之路：HTML（3）

在HTML中，有列表标签。列表最大的特点是整齐、简洁、有序，用列表进行布局会更加自由方便。根据使用的情景不同，可以将列表分为三大类：无序列表、有序列表和自定义列表。

在HTML中使用<ul>标签定义一个无序列表，在无序列表中使用<li>标签定义列表项，基本语法如下：

无序列表的定义需要遵循以下规则：

1.无序列表的各个列表项之间没有顺序级别之分，是并列的；顾名思义，无序列表，肯定是没有顺序的。

2.直接在<ul>标签中使用其他标签或者直接输入文字是不允许的，ul标签中只能使用<li>标签。

3.<li>标签相当于一个容器，可以容纳所有的元素（其他所有标签，或者文字等）。

li中可以容纳所有元素：

4.和很多标签一样，无序列表会带有自己的样式属性，但在实际使用时，我们会使用 CSS 来设置。

总结一下，最重要的是在ul无序列表中（有序列表也一样），不能直接使用其他标签或输入文字，需要在ul标签中使用li（就相当于是列表中一个大的容器）标签，然后在li标签中进行操作。

有序列表即为有排列顺序的列表，其各个列表项会按照一定的顺序排列定义。有序列表和无序列表的差别就在于有序列表中的列表项是有顺序的。在HTML中，使用<ol>标签定义有序列表，列表排序是通过数字显示的；和无序列表一样，有序列表中也是通过li标签来定义列表项的。

可以看见，有序列表中的列表项的前面是通过数字来表示列表项顺序的。 有序列表的定义和无序列表定义类似，也需要遵循以下规则：

1.有序列表的各个列表项之间通过数字来表示顺序；顾名思义，有序列表，肯定具有顺序的。

2.直接在<ol>标签中使用其他标签或者直接输入文字是不允许的，ol标签中只能使用<li>标签。

3.<li>标签相当于一个容器，可以容纳所有的元素（其他所有标签，或者文字等）。

在HTML中我们可以创建自定义列表，自定义列表通常用于对术语或名词进行解释或者描述，自定义列表中的列表项没有任何项目符号。在HTML标签中，通过<dl>标签定义一个自定义列表（描述列表），dl标签需要配合<dt>（定义项目/名字）、<dd>（描述每一个项目/名字）一起使用。

这个代码中，通过dl标签创建了一个自定义列表，并且使用dt标签定义了一个“项目”（帮助中心），然后通过dd标签为这个“项目”（帮助中心）进行了描述。

注意：<dl>中只能包含<dt>和<dd>，这和ul或ol中只能包含li是一样的道理；<dl>中的dt和dd个数没有限制，可以是任意个，但是一般情况下是一个dt对应多个dd，因为相当于是一个“项目”对应多个“描述”，并且dt或dd中可以放任何标签（这点也和li类似）。