[前端学习之HTML5]（05）：无序列表和有序列表

1，列表的标签

列表分为两种类型，一种是有序列表，另一种是无序列表。像下面用“·”或“△”开头的就是无序列表；而以“1、2、3...”开头的则是有序列表。

有序列表是使用编号来记录项目的顺序
无序列表用项目符号来标记无序的项目。

以下是列表的主要标签：

标签	描述
<ul>	无序列表
<ol>	有序列表
<dir>	目录列表
<dl>	定义列表
<menu>	菜单列表
<dt>、<dd>	定义列表的标签
<li>	列表项目的标签

2，无序列表

在无序列表中，各个列表项之问没有顺序级别之分，它通常使用一个项目符号作为每个列表项的前缀。无序列表主要使用<ul>、<dir>、<dl>、<li>几个标签和 type 属性。

1，无序列表的标签

无序列表的特征在于提供一种不编号的列表方式，而在每一个项目文字之前，以符号作为分项标识。语法格式如下：

<ul>
  <li>第一项</li>
  <li>第二项</li>
  <li>第三项</li>
  ...
</ul>

使用<ul>标签定义一个无序列表
使用<li>创建每一项，在一个无序列表中可以包含很多列表项。

2，无序列表的属性

（1）项目符号

默认情况下，无序列表的项目符号是“ · ”，但是通过type参数可以调整无序列表的项目符号，避免过于单调。语法格式如下：

<ul type="符号类型">
  <li>第一项</li>
  <li>第二项</li>
  <li>第三项</li>
  ...
</ul>

其中，type属性决定了列表项开始的符号，“符号类型”的值有三个，如下表：

类型值	项目列表的符号
disc	●
circle	○
square	■
none	不显示符号

实例：

<ul type="square">
  <li>第一项</li>
  <li>第二项</li>
  <li>第三项</li>
  ...
</ul>

运行：

（2）类型定义

除了上述语法，无序列表的类型定义也可以在<li>标签中，语法格式是<li type="符号类型">，这样定义的结果是对单个项目进行定义。

实例：

<ul>
  <li type="square">第一项</li>
  <li type="circle">第二项</li>
  <li type="disc">第三项</li>
  ...
</ul>

运行：

3，有序列表

1，有序列表的标签

有序列表使用编号，而不是项目符号来编排项目。列表中的项目采用数字或英文字母开头，通常各项目间有先后的顺序性。在有序列表中，主要使用，主要使用<ol>和<li>两个标签以及type和start两个属性。语法格式如下：

<ol>
  <li>第一项</li>
  <li>第二项</li>
  <li>第三项</li>
  ...
</ol>

实例：

<ol>
  <li>千山鸟飞绝，</li>
  <li>万径人踪灭。</li>
  <li>孤舟蓑笠翁，</li>
  <li>独钓寒江雪。</li>
</ol>

运行：

2，有序列表的属性

有序列表的列表项默认是数字序号，如果需要将列表序号改成其他类型，如英文字母，罗马字母开头，需要改变type属性。语法格式如下：

<ol type="序号类型">
  <li>第一项</li>
  <li>第二项</li>
  <li>第三项</li>
  ...
</ol>

在上述语法中，序号类型有五种，如下表：

type取值	列表项目的序号类型
1	数字 1，2，3，4...
a	小写英文字母 a，b，c，d...
A	大写英文字母 A，B，C，D...
i	小写罗马数字 i，ii，iii，iv...
I	大写罗马数字 I，II，III，IV...

4，列表的嵌套

嵌套列表指的是多于一级层次的列表。一级项目下面可以存在二级项目，三级项目等。项目列表可以进行嵌套，以实现多级项目列表的形式。

1，定义列表的嵌套

定义列表是一种两个层次的列表，用于解释名词的含义，名词为第一层次，解释为第二层次，并且不包含项目符号。在定义列表中，一个<dt>标签下可以有多个<dd>标签作为名词的解释和说明，以实现定义列表的嵌套。语法格式如下：

<!--定义列表的嵌套-->
<dl>
    <dt>名词一</dt>
  <dd>解释1</dd>
  <dd>解释2</dd>
  <dd>解释3</dd>

    <dt>名词二</dt>
  <dd>解释1</dd>
  <dd>解释2</dd>
  <dd>解释3</dd>
</dl>

实例：定义列表的第一层用于放置标题，诗句内容是第二层次，并且不包含项目符号

<dl>
  <dt>赠孟浩然</dt>
  <dd>作者：李白</dd><br/>
  <dd>吾爱孟夫子，风流天下闻。<br/>
    红颜气轩冕，白首卧松云<br/>
    醉月频中圣，梨花不事君。<br/>
    高山安可仰？徒此揖清芬。</dd>

  <dt>蜀相</dt>
  <dd>作者：杜甫</dd><br/>
  <dd>丞相祠堂何处寻？锦官城外柏森森。<br/>
    映阶碧草自春色，隔叶黄鹂空好音。<br/>
    三顾频烦天下计，两朝开济老臣心。<br/>
    出师未捷身先死，长使英雄泪满襟。</dd>
</dl>

运行：

2，无序列表和有序列表的嵌套

最常见的列表嵌套模式就是有序列表和无序列表的嵌套，可以重复的使用<ol>和<ul>标签组合实现。这种嵌套通常用于表示分类和子分类的关系。

实例：

<ul>
  <li>水果
    <ul>
      <li>苹果</li>
      <li>香蕉</li>
      <li>樱桃</li>
    </ul>
  </li>
  <li>蔬菜
    <ul>
      <li>番茄</li>
      <li>黄瓜</li>
      <li>胡萝卜</li>
    </ul>
  </li>
</ul>

<ol>
  <li>步骤一
    <ol>
      <li>子步骤1.1</li>
      <li>子步骤1.2</li>
    </ol>
  </li>
  <li>步骤二
    <ol>
      <li>子步骤2.1</li>
      <li>子步骤2.2</li>
    </ol>
  </li>
</ol>

运行：