表格是用来显示数据的,那么列表就是用来布局的。
列表最大的特点就是:整齐、整洁、有序、它作为布局会更加自由和方便。
根据使用情景不同,列表可以分为三大类:无序列表、有序列表、和自定义列表
2.1无序列表
<ul>
标签表示HTML页面中项目的无序列表,一般会以项目符号呈现列表项,而列表项使用<li>
标签定义,<ul></ul>
是父标签,<li></li>
是ul的子标签
无序列表的基本语法格式如下:
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
……
</ul>
例子:
<ul>
<li>榴莲</li>
<li>鲱鱼罐头</li>
<li>臭豆腐</li>
</ul>
特别说明
- 无序列表的各个列表项直接没有顺序级别之分,是并列的。
<ul></ul>
中只能嵌套<li></li>
,直接在<ul></ul>
标签中输入其他标签或者文章的做法虽然实现,但是是不被允许的。<li>与</li>
之间相当于一个容器,可以容纳所有元素标签。
<ul>
<li>榴莲</li>
<li>鲱鱼罐头</li>
<li>
<p>臭豆腐</p> <!--这里的li标签中就嵌套了一个p标签-->
</li>
</ul>
无序列表会带有自己的样式属性,但在实际使用时,我们会使用css来设置。
2.2有序列表
有序列表即为有排序顺序的列表,其各个列表项会按照一定的顺序排列定义。
HTML标签中,<ol>
标签用语定义有序列表,列表排序以数字来显示,并且使用<li>
标签来定义列表项。
<ol>
<li>榴莲</li>
<li>鲱鱼罐头</li>
<li>
<p> 臭豆腐 </p><!--这里的li标签中就嵌套了一个p标签-->
</li>
</ol>
<ul></ul>
中只能嵌套<li></li>
,直接在<ul></ul>
标签中输入其他标签或者文章的做法虽然实现,但是是不被允许的。<li>与</li>
之间相当于一个容器,可以容纳所有元素标签。- 有序列表会带有自己的样式属性,但在实际使用时,我们会使用css来设置。