HTML中的三个列表,具体的使用及列表样式

发布时间 2023-12-09 10:35:20作者: 小亮爱编码

HTML有三种列表:
## 一、有序列表
有序列表(Ordered lists):用数字或字母来标记列表项,每个列表项前会有一个数字或字母。

```html
<ol>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ol>
```
## 二、 无序列表
无序列表(Unordered lists):用符号来标记列表项,每个列表项前会有一个符号,常用的符号有圆点、方块和实心圆点。

```html
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ul>
```
## 三、定义列表
定义列表(Definition lists):用于定义术语或概念,每个列表项由一个术语和对应的定义组成。

```html
<dl>
<dt>术语1</dt>
<dd>定义1</dd>
<dt>术语2</dt>
<dd>定义2</dd>
<dt>术语3</dt>
<dd>定义3</dd>
</dl>
```

这些列表都可以使用CSS样式进行美化和自定义。

## 四、列表样式
### 无标记符号

去除无序的圆点,属性:style="list-style:none"
```
<ul>
<li style="list-style:none">苹果</li>
<li>香蕉</li>
<li style="list-style:none">葡萄</li>
</ul>
```
结果
![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/19f2401eabe24a8f81c6694a92e7a10a.png)
### 空心圆
将实心圆换成空心圆,属性:style="list-style:circle"
```
<ul>
<li style="list-style:circle">苹果</li>
<li>香蕉</li>
<li style="list-style:circle">葡萄</li>
</ul>
```
结果
![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/0c14df7c1c0344f5ae771d8536bd63ca.png)

### 正方形
将实心圆换成正方形,属性:style="list-style:square"
```
<ul>
<li style="list-style:square">苹果</li>
<li>香蕉</li>
<li style="list-style:square">葡萄</li>
</ul>
```
结果
![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/c7c1b7bb0b7345f18e333eb775139065.png)
### 数字
无序也可以当有序用
```
<ul>
<li style="list-style:decimal">苹果</li>
<li>香蕉</li>
<li style="list-style:decimal">葡萄</li>
</ul>
```
结果
![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/c43bd2a1da354e13a070aff2dca17d41.png)