列表样式 水平_HTML从零开始——列表和图像标签

文本的排序和组合，就是所谓的列表，方便对文本内容进行分级或者分类，更清晰的展示内容，包括有序列表和无序列表：

• 有序列表是每个列表项前面有编号，呈现出顺序，就像下面这样：

1. 列表项 A
2. 列表项 B
3. 列表项 C

• 无序列表则是列表项前面没有编号，只有一个列表符号，默认是一个圆点：

· 列表项 A
· 列表项 B
· 列表项 C

而文本展示的过程中加入适当的图像，则可以提升页面的活泼程度，让网页变得丰富多彩，我们接下来就来看看列表和图像的标签。

---

1 <ol>

<ol>标签是一个有序列表容器（ordered list），会在内部的列表项前面产生数字编号。列表项的顺序有意义时，比如排名，就会采用这个标签：

<ol>
  <li>列表项 A</li>
  <li>列表项 B</li>
  <li>列表项 C</li>
</ol>

上面代码会在列表项 A、B、C 前面，分别产生1、2、3的编号：

<ol>标签内部可以嵌套<ol>标签或<ul>标签，形成多级列表：

<ol>
  <li>列表项 A</li>
  <li>列表项 B
    <ol>
      <li>列表项 B1</li>
      <li>列表项 B2</li>
      <li>列表项 B3</li>
    </ol>
  </li>
  <li>列表项 C</li>
</ol>

上面代码中，一个有序列表内部嵌套了另一个有序列表，渲染结果如下：

该标签有以下属性：

（1）reversed

reversed属性产生倒序的数字列表。

<ol reversed>
  <li>列表项 A</li>
  <li>列表项 B</li>
  <li>列表项 C</li>
</ol>

上面代码中，列表项 A、B、C 前面，产生的编号是3、2、1：

（2）start

start属性的值是一个整数，表示数字列表的起始编号：

<ol start="5">
  <li>列表项 A</li>
  <li>列表项 B</li>
  <li>列表项 C</li>
</ol>

上面代码中，列表项 A、B、C 前面，产生的编号是5、6、7：

（3）type

type属性指定数字编号的样式。目前，浏览器支持以下样式：

• a：小写字母
• A：大写字母
• i：小写罗马数字
• I：大写罗马数字
• 1：整数（默认值）

<ol type="a">
  <li>列表项 A</li>
  <li>列表项 B</li>
  <li>列表项 C</li>
</ol>

上面代码中，列表项 A、B、C 前面的编号，分别是英文小写字母a、b、c：

注意，即使编号是字母，start属性也依然使用整数：

<ol type="a" start="3">
  <li>列表项 A</li>
  <li>列表项