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

合集 - HTML(3)

1.HTML中的常用的特殊字符以及所有特殊字符2023-12-09

2.HTML中的三个列表，具体的使用及列表样式2023-12-09

3.HTML常用表单元素使用?2023-12-09

收起

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>
```
结果
### 空心圆
将实心圆换成空心圆，属性：style="list-style:circle"
```
<ul>
<li style="list-style:circle">苹果</li>
<li>香蕉</li>
<li style="list-style:circle">葡萄</li>
</ul>
```
结果

### 正方形
将实心圆换成正方形，属性：style="list-style:square"
```
<ul>
<li style="list-style:square">苹果</li>
<li>香蕉</li>
<li style="list-style:square">葡萄</li>
</ul>
```
结果
### 数字
无序也可以当有序用
```
<ul>
<li style="list-style:decimal">苹果</li>
<li>香蕉</li>
<li style="list-style:decimal">葡萄</li>
</ul>
```
结果