在本章节学习内容如下：
-
如何创建编号列表
-
如何创建项目列表
-
如何创建定义列表
1、列表是一种用于放置事务集合的通用容器，分为三种：有序列表、无序列表和定义列表。
<ul.../> 有序列表：是带编号的。非常适合TOP10等内容。
<ol.../> 无序列表：不带编号的，但每个列表默认带项目符号。适合做一个项目集合的东西。
<dl.../> 定义列表：用于呈现词汇表等由名称和描述组成的内容。
每个列表项都有自己的标签：在词汇列表中为<dt>和<dd>；在其他列表中为<li>。
<!--无序列表演示代码-->
<p>This is a ul code</p>
<ul>
<li>Hello World</li>
<li>Good Morning</li>
<li>Good Night</li>
</ul>
<!--有序列表演示代码-->
<p>This is a ol code</p>
<ol>
<li>Hello World</li>
<li>Good Morning</li>
<li>Good Night</li>
</ol>
<!--结果如下-->
2、定制有序列表
有序列表特有的定制有两种：1）使用CSS属性list-style-type
2）使用属性（attribute）type，但这种在HTML5中已摒弃。
在标签<ol>中，可使用属性style来指定类型：（其默认值为decimal）
<ol style="list-style-type: lower-alpha;">可指定列表使用的起始编号或字母，可使用属性start执行。
<!--定制有序列表演示代码-->
<p>This is a ol code</p>
<ol style="list-style-type:upper-alpha;" start="4">
<li>Hello World</li>
<li>Good Morning</li>
<li>Good Night</li>
</ol>
也可修改任何列表项的编号，在标签<li>中使用属性value执行。
<!--定制有序列表演示代码-->
<p>This is a ol code</p>
<ol style="list-style-type;">
<li>Hello World</li>
<li value="10">Good Morning</li>
<li>Hello World</li>
<li value="20">Good Night</li>
<li>Hello World</li>
</ol>
3、定制无序列表
与有序列表一样，无序列表可以使用属性list-style-type进行定制。
<!--定制无序列表演示代码-->
<p>This is a ul code</p>
<ul style="list-style-type: disc">
<li>Hello World</li>
<li>Good Morning</li>
<li>Good Night</li>
</ul>
<ul style="list-style-type: square">
<li>Hello World</li>
<li>Good Morning</li>
<li>Good Night</li>
</ul>
<ul style="list-style-type: circle">
<li>Hello World</li>
<li>Good Morning</li>
<li>Good Night</li>
</ul>
除了以上实心圆、正方形、空心圆以外，还可以使用一幅图来替换。通过list-style-image执行
<ul style="list-style-image: url（/a.gif）">
<li>Hello World</li>
</ul>列表项横跨多行时，默认是与第一行左对齐。但通过属性list-style-position可实现后续行与项目符号或列表符号对齐。（默认值为outside即与第一行左对齐，inside是与项目符号或列表符号对齐）
如果要同时修改多个列表相关属性，可使用list-style指定三个值
<ul style="list-style: circle inside URL(/a.gif)">
<li>Hello World</li>
</ul>4、定义列表
定义列表与其他列表稍有不同，其中每个列表项都包含两部分：
1）术语；
2）术语的定义。
定义列表的每部分都有其各自的标签，术语标签为<dt>，定义标签为<dd>。
<!--定义列表演示代码-->
<dl>
<dt>Hello</dt>
<dd>an expression of greeting</dd>
<dt>World</dt>
<dd>the earth, with all its countries,
peoples and natural features</dd>
<dt>Good</dt>
<dd>of high quality or an acceptable standard</dd>
由此可知在浏览器显示时，术语和定义都是分开的并缩进定义。与代码换行等无关。
5、嵌套列表
<!--嵌套列表演示代码-->
<ul style="list-style-type: circle">
<li>Hello World</li>
<li>Good Morning</li>
<li>嵌套列表
<ul>
<li>Good Night</li>
</ul>
</li>
</ul>
