传智播客 张鹏 带你一周hold住htmlcss 第06讲 html列表与图片应用！

无序列表

无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。

无序列表始于 <ul> 标签。每个列表项始于 <li>。

<ul>

<li>Coffee</li>

<li>Milk</li>

</ul>

有序列表

同样，有序列表也是一列项目，列表项目使用数字进行标记。

有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。

<ol>

<li>Coffee</li>

<li>Milk</li>

</ol>

定义列表

自定义列表不仅仅是一列项目，而是项目及其注释的组合。

自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。

<dl>

<dt>Coffee</dt>

<dd>Black hot drink</dd>

<dt>Milk</dt>

<dd>White cold drink</dd>

</dl>

HTML列表元素（如ol,ul,dl）等在现下的网站开发制作中有着非常广泛的应用，然而，它们的在不同浏览器下的脾气却不一样。本文就是分析这些列表元素的基本特性，在不同浏览器下的各类兼容性问题，以及介绍一些常见的应用等。

二、HTML中可用的列表元素
1、无序列表：ul
无序列表是最常使用的列表，下图显示了无序列表在不同浏览器下的显示：

正如上面显示的，无序列表在不同浏览器下的默认设置是由些许差异的。当然，在如今实际的网站项目上是很少看到没有任何修饰的无序列表了。其中原因之一就是CSS的重置(css reset) ，已经将无序列表默认的列表项目符号，margin或padding都去掉了。

无序列表的一些特定的css属性有list-style-type，list-style-position，和list-style-image。这些属性设置了列表项目符号的类型，标记的位置，以及使用图片代替标记。这三个属性可以使用list-style进行合并缩写。

ist-style-type属性可以设置为一些不同的值，下面图表展示的就是部分值的页面效果：

依赖于用户的浏览器及操作系统，某些list-style-item值可能不能正确显示，通常默认为十进制数值，用无需列表实现递增数值是不推荐的，因为这样“无序列表”其本身的语义已经不复存在了。

list-style-position针对于列表标记的位置，可以被设置为outside（默认）或是inside。如果list-style-image被设置的话，其也会影响图片的位置。

list-style-image属性可以给无序列表一个自定义的独一无二的表现，不幸的是，在IE下使用此方法添加项目编号是bug多多，故很少被使用。一个更好的解决方法是添加background image到列表的li元素上，并相应的调整background image的位置，并设置为no-repeat。在maxdesign.com上，已经通过分步讲解演示了这个方法，而且在所有的浏览器下都工作良好。

2、有序列表：ol
有序列表在当列表项目的每个列表项目前面需要一个递增值的时候使用（例如1,2,3等）。有序列表的列表类型list-style-type可以被设置为任何在无序列表下可以设置的值。在大部分情况下，有序列表要么前面是个递增数值，要么前面没有任何标记。不建议使用有序列表实现类似于无序列表的表现。因为这样，有序列表本身的语义已经不正确了。

3、定义列表：dl
定义列表用来标记已经定义的列表项，它们包括定义标题(dt)以及定义本身(dd)。定义列表项目没有必要完全匹配，下面的代码在严格的XHTML下是完全合法的：

<dl>
	    <dt>无线音乐咪咕汇 </dt>
	    <dt>哥本哈根会议</dt>
	    <dd>《十月围城》</dd>
</dl>

这样，您可以在单个dd下面使用多个dt，也可以在单个dt下面使用多个dd。

定义列表的视觉显示，默认情况下，各个浏览器的显示几乎是一致的，如下图所示：

上图对应的HTML代码如下：

<dl>

<dt>标题 </dt>

<dd>这里是定义的内容 </dd>

</dl>

<dl> <dt>热门电影 </dt>