在JSP页面设计中，列表是一个常用的元素，用于展示一系列相关的数据。而Li标签则是构成列表的基础，它可以让我们的列表变得丰富多彩。今天，我们就来深入探讨一下JSP Li标签的实例，让我们一起领略其魅力吧！

一、Li标签的基本用法

jsp,li,标签实例_JSPLi标签实例打造优雅的列表之美 第1张

Li标签用于定义无序列表或有序列表中的列表项。它通常与Ul标签结合使用，构成一个完整的列表结构。

1. 无序列表（Unordered List）

无序列表中的列表项通常以圆点、实心圆、方形或自定义样式表示。其语法如下：

```html

  • 列表项1

  • 列表项2

  • 列表项3

```

2. 有序列表（Ordered List）

有序列表中的列表项按照数字或字母顺序排列。其语法如下：

```html

  1. 列表项1

  2. 列表项2

  3. 列表项3

```

二、Li标签的属性

Li标签拥有一些常用的属性，可以帮助我们更好地控制列表项的样式和行为。

1. type属性

type属性用于指定有序列表中列表项的排序方式。以下是一些常见的值：

值说明
1默认值，表示数字排序（1,2,3...）
A表示大写字母排序（A,B,C...）
a表示小写字母排序（a,b,c...）
I表示大写罗马数字排序（I,II,III...）
i表示小写罗马数字排序（i,ii,iii...）

2. value属性

value属性用于指定有序列表中列表项的起始值。例如，如果我们将value设置为10，则列表项将按照10, 11, 12...的顺序排列。

3. class属性

class属性用于为列表项添加CSS样式类，从而实现样式的个性化定制。

4. style属性

style属性用于直接在Li标签中定义CSS样式。

三、Li标签实例

接下来，我们通过一些实例来展示Li标签在实际页面中的应用。

1. 基本无序列表

```html

  • 苹果

  • 香蕉

  • 橘子

```

效果如下：

* 苹果

* 香蕉

* 橘子

2. 基本有序列表

```html

  1. 苹果

  2. 香蕉

  3. 橘子

```

效果如下：

1. 苹果

2. 香蕉

3. 橘子

3. 有自定义样式的列表

```html