html列表

html常用标签

### 1、html列表

#### 无序列表

没有序列的一组内容。

(1)语法

```html

<ul>

<li>苹果</li>

<li>香蕉</li>

...

</ul>

```

(2)语义

无序列表，用于将没有数字顺序的一组数据或内容进行分组。

(3)默认样式（演示）

- 默认间距(外边距、内边距)

- 列表样式：实心圆

(4)典型应用

- 新闻列表

- 产品列表

- 导航、分页、选项止

(5)type属性

- disc列表样式实心圆

- circle 列表样式空心圆

- square列表样式为小方块

```html

<ul type="square">

<li>苹果</li>

<li>香蕉</li>

</ul>

```

**注意:**type属性不常用，通常使用css属性替代。

#### 1.2 有序列表

(1)语法

```

<ol>

<li>出门</li>

<li>右转</li>

...

</ul>

```

(2)语义

无序列表,用于将顺序是有意义的一组数据或内容进行分组

(3)默认样式（演示）

- 默认间距

- 列表样式：数字编号

(4)典型应用 （图示）

- 烹饪食谱中的各个步骤

- 指路时的各处转弯方向

- 营养信息标签上 按含量排序的成分列表

- 面包屑导航

(5)type属性（了解）

- `a`: 小写字母

- `A`: 大写字母

- `i`: 小写罗马数字

- `I`: 大写罗马数字

- `1`: 数字

```html

<ol type="I">

<li>步骤一</li>

<li>步骤二</li>

</ol>

```

**注意:**type属性不常用，通常使用css属性替代。