无序列表和有序列表的基本语法-编程入门课：HTML(5)从入门到实战

当前位置:　首页>> 技术小册>> 编程入门课：HTML(5)从入门到实战

在HTML中，我们可以使用无序列表和有序列表来展示页面中的一些项目列表。无序列表一般用于没有特定顺序的项目，而有序列表则用于需要按照一定顺序展示的项目。

一、无序列表

无序列表用`<ul>`标签来表示，每个列表项用`<li>`标签来表示。无序列表的每个项目默认使用圆点作为标识符。

以下是一个简单的无序列表的代码示例：
```asp
<ul>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
</ul>

```
以上代码将会生成一个包含三个列表项的无序列表，每个列表项都包含在`<li>`标签中。在页面中，该列表将会显示为：

- 列表项1
- 列表项2
- 列表项3
二、有序列表

有序列表用`<ol>`标签来表示，每个列表项同样用`<li>`标签来表示。有序列表的每个项目默认使用数字作为标识符。

以下是一个简单的有序列表的代码示例：
```asp
<ol>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
</ol>

```
以上代码将会生成一个包含三个列表项的有序列表，每个列表项同样包含在`<li>`标签中。在页面中，该列表将会显示为：

1. 列表项1
2. 列表项2
3. 列表项3

三、自定义列表样式

在默认情况下，无序列表使用圆点作为标识符，而有序列表使用数字作为标识符。但是，在实际应用中，我们可能需要使用自定义的列表样式来美化列表的外观。

我们可以使用CSS来为列表指定自定义样式。具体做法是，使用CSS的list-style-type属性来指定列表项的标识符类型。list-style-type属性支持多种值，例如disc（圆点）、square（正方形）、decimal（数字）等等。

以下是一个使用自定义列表样式的代码示例：
```asp
<style>
  ul {
    list-style-type: square; /* 将无序列表的标识符改为正方形 */
  }
  ol {
    list-style-type: upper-roman; /* 将有序列表的标识符改为大写罗马数字 */
  }
</style>
<ul>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
</ul>
<ol>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
</ol>

```

该分类下的相关小册推荐：

编程入门课：CSS(3)从入门到实战