HTML5列表

HTML5是最新的HTML标准，它引入了许多新的元素和属性，使得网页设计更加灵活和强大，列表是HTML中最基本的元素之一，用于组织和显示信息，在HTML5中，有两种类型的列表：无序列表（unordered list）和有序列表（ordered list）。

## 无序列表

无序列表使用<ul>标签来定义，每个列表项使用<li>标签来定义，无序列表中的项目没有特定的顺序，通常使用符号（如圆点、方块或箭头）来表示项目的层次关系。

以下代码将创建一个包含三个项目的无序列表：

<ul>
  <li>苹果</li>
  <li>香蕉</li>
  <li>橙子</li>
</ul>

在浏览器中，这个无序列表将显示为：

- 苹果

- 香蕉

- 橙子

## 有序列表

有序列表使用<ol>标签来定义，每个列表项使用<li>标签来定义，有序列表中的项目按照特定的顺序排列，通常从1开始，然后依次递增。

以下代码将创建一个包含三个项目的有序列表：

<ol>
  <li>苹果</li>
  <li>香蕉</li>
  <li>橙子</li>
</ol>

在浏览器中，这个有序列表将显示为：

1、苹果

2、香蕉

3、橙子

## 自定义列表标记

除了默认的无序列表和有序列表标记外，HTML5还允许我们自定义列表标记，通过在<ul>或<ol>标签中添加type属性，我们可以指定不同的标记类型，我们可以使用大写字母A到Z作为有序列表的标记：

<ol type="A">
  <li>苹果</li>
  <li>香蕉</li>
  <li>橙子</li>
</ol>

A. 苹果

B. 香蕉

C. 橙子

## 嵌套列表

HTML5还支持嵌套列表，即一个列表项可以包含另一个列表，要创建嵌套列表，只需在一个<li>标签中添加另一个<ul>或<ol>标签即可，以下代码将创建一个包含两个嵌套列表项的无序列表：

<ul>
  <li>水果：</li>
  <ul>
    <li>苹果</li>
    <li>香蕉</li>
    <li>橙子</li>
  </ul>
  <li>蔬菜：</li>
  <ul>
    <li>胡萝卜</li>
    <li>西红柿</li>
    <li>黄瓜</li>
  </ul>
</ul>

- 水果：苹果、香蕉、橙子、胡萝卜、西红柿、黄瓜。