列表是一系列排列好的项目,主要分成两类:有序列表和无序列表。
有序列表是每个列表项前面有编号,呈现出顺序,就像下面这样。

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

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

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

1.

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

      1. <ol>
      2. <li>列表项 A</li>
      3. <li>列表项 B</li>
      4. <li>列表项 C</li>
      5. </ol>

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

        标签内部可以嵌套
          标签或
            标签,形成多级列表。

            1. <ol>
            2. <li>列表项 A</li>
            3. <li>列表项 B
            4. <ol>
            5. <li>列表项 B1</li>
            6. <li>列表项 B2</li>
            7. <li>列表项 B3</li>
            8. </ol>
            9. </li>
            10. <li>列表项 C</li>
            11. </ol>

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

            1. 1. 列表项 A
            2. 2. 列表项 B
            3. 1. 列表项 B1
            4. 2. 列表项 B2
            5. 3. 列表项 B3
            6. 3. 列表项 C

            该标签有以下属性。
            (1)reversed
            reversed属性产生倒序的数字列表。

            1. <ol reversed>
            2. <li>列表项 A</li>
            3. <li>列表项 B</li>
            4. <li>列表项 C</li>
            5. </ol>

            上面代码中,列表项 A、B、C 前面,产生的编号是3、2、1。
            (2)start
            start属性的值是一个整数,表示数字列表的起始编号。

            1. <ol start="5">
            2. <li>列表项 A</li>
            3. <li>列表项 B</li>
            4. <li>列表项 C</li>
            5. </ol>

            上面代码中,列表项 A、B、C 前面,产生的编号是5、6、7。
            (3)type
            type属性指定数字编号的样式。目前,浏览器支持以下样式。

            • a:小写字母
            • A:大写字母
            • i:小写罗马数字
            • I:大写罗马数字
            • 1:整数(默认值)

              1. <ol type="a">
              2. <li>列表项 A</li>
              3. <li>列表项 B</li>
              4. <li>列表项 C</li>
              5. </ol>

              上面代码中,列表项 A、B、C 前面的编号,分别是英文小写字母a、b、c。
              注意,即使编号是字母,start属性也依然使用整数。

              1. <ol type="a" start="3">
              2. <li>列表项 A</li>
              3. <li>列表项 B</li>
              4. <li>列表项 C</li>
              5. </ol>

              上面代码中,type属性指定编号采用小写英文字母,start属性等于3,表示从c开始编号。

              2.

                  标签是一个无序列表容器(unordered list),会在内部的列表项前面产生实心小圆点,作为列表符号。列表项的顺序无意义时,采用这个标签。

                  1. <ul>
                  2. <li>列表项 A</li>
                  3. <li>列表项 B</li>
                  4. <li>列表项 C</li>
                  5. </ul>

                  上面代码的渲染结果是,列表项 A、B、C 前面,分别产生一个实心小圆点,作为列表符号。

                    标签内部可以嵌套
                        ,形成多级列表。

                        3.
                      1. 表示列表项,用在
                            容器之中。
                            有序列表
                              之中,
                            1. 有一个value属性,定义当前列表项的编号,后面列表项会从这个值开始编号。

                              1. <ol>
                              2. <li>列表项 A</li>
                              3. <li value="4">列表项 B</li>
                              4. <li>列表项 C</li>
                              5. </ol>

                              上面代码中,value属性指定第二个列表项的编号是4,因此三个列表项的编号,分别为1、4、5。

                              4.

                              标签是一个块级元素,表示一组术语的列表(description list)。术语名(description term)由
                              标签定义,术语解释(description detail)由
                              标签定义。
                              常用来定义词汇表。

                              1. <dl>
                              2. <dt>CPU</dt>
                              3. <dd>中央处理器</dd>
                              4. <dt>Memory</dt>
                              5. <dd>内存</dd>
                              6. <dt>Hard Disk</dt>
                              7. <dd>硬盘</dd>
                              8. </dl>

                              都是块级元素,
                              默认会在
                              下方缩进显示。上面代码的默认渲染结果如下。 ```html CPU 中央处理器

                          Memory 内存

                          Hard Disk 硬盘

                          1. 多个术语(<dt>)对应一个解释(<dd>),或者多个解释(<dd>)对应一个术语(<dt>),都是合法的。
                          2. ```html
                          3. <dl>
                          4. <dt>A</dt>
                          5. <dt>B</dt>
                          6. <dd>C</dd>
                          7. <dt>D</dt>
                          8. <dd>E</dd>
                          9. <dd>F</dd>
                          10. </dl>

                          上面代码中,A和B有共同的解释C,而D有两个解释E和F。