在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类似)。