HTML - 列表_html用列表排列有什么好处

一、列表标签

表格用来显示数据，列表用来布局

列表的特点：整齐、有序，作为布局更加自由方便

列表分类：无序列表、有序列表、自定义列表

1.1 无序列表（重点）

<ul> 标签表示无序列表，一般会以项目符号（小黑点）呈现列表项，列表项使用 <li> 标签来定

义。

注意事项

1. 无序列表的各个列表项之间没有顺序级别之分，是并列的。

2. <ul></ul> 中只能嵌套 <li></li> ，直接在 <ul></ul> 标签中输入其他标签或者文字的做法是不被

    允许的。

3. <li></li> 之间相当于一个容器，可以容纳所有元素。

4. 无序列表会带有自己的样式属性（ · 、· 、·  ......），但在实际使用时，则使用CSS来设置。

<h4>&nbsp;&nbsp;&nbsp;&nbsp;特长</h4>
<ul>
    <li>足球</li>
    <li>排球</li>
    <li>羽毛球</li>
</ul>

效果图

1.2 有序列表（理解）

有顺序的列表，其各个列表项会按照一定的顺序排列定义

标签为 <ol> ，列表排序以数字来显示，并且使用 <li> 标签来定义列表项

顺序不能随便颠倒。

<h4>&nbsp;&nbsp;&nbsp;&nbsp;粉丝排行榜</h4>
<ol>
    <li>刘德华 10000</li>
    <li>刘谦 1000</li>
    <li>张三 100</li>
</ol>

效果图

注意事项

1. 有序列表的各个列表项之间有顺序级别之分，不能随意颠倒。

2. <ol></ol> 中只能嵌套 <li></li> ，直接在 <ol></ol> 标签中输入其他标签或者文字的做法是不被

    允许的。

3. <li></li> 之间相当于一个容器，可以容纳所有元素。

4. 有序列表会带有自己的样式属性（1. 、2. 、3. ......），但在实际使用时，则使用CSS来设置。

1.3 自定义列表（重点）

自定义列表的使用场景：一个项目/名称下有几个对该项目/名字的具体描述

自定义列表通常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号，但是

前边会有一段大的空白。

1.3.1 语法格式

标签为 <dl> ，该标签与 <dt> （定义项目/名字）和 <dd> （描述项目/名字） 一起使用。

其基本的语法如下：

<dl>
    <dt>名词1</dt>
    <dd>名词1 解释1</dd>
    <dd>名词1 解释2</dd>
</dl>

注意事项

1. <dl> </dl> 里面只能包含 <dt> 和 <dd> 。

2. <dt> 和 <dd> 个数没有限制，经常是一个 <dt> 对应多个 <dd> 。

3. <dt> 和 <dd> 是并列关系。