【CSS-task05】dl、ul、ol用哪个比较好？

1.背景介绍

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

2.知识剖析

一、无序列表（ul）

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

无序列表始于（ul） 标签；

每个列表项始于(li)（列表项内部可以使用段落、换行符、图片、链接以及其他列表等）。

二、有序列表（ol）

和无序列表一样，有序列表是一列项目，列表项目一般使用数字进行标记。

还可以用默认数字/大写字母A/小写字母a/大写罗马字母I/小写罗马字母i。

有序列表始于 （ol） 标签；

每个列表项始于 (li) 标签（列表项内部可以使用段落、换行符、图片、链接以及其他列表等）。

三、自定义标签（dl）

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

自定义列表以 （dl)标签开始；

每个自定义列表项以(dt) 开始；

每个自定义列表项的定义以 (dd) 开始。

（定义列表的列表项内部可以使用段落、换行符、图片、链接以及其他列表等）

3.常见问题

怎么让有序列表用别的方法排列？怎么取消列表前面的小圆点？怎么让列表横向排列？

4.解决方案

(ol)标签可以用"type"属性来改变

列表前面的小圆点可以用list-style:none来清除，也可以用背景图片覆盖

横向排列列表用浮动可以解决

5.编码实战

<ol type="A">可以让列表以大写ABCD开始排列，A也可以换成小写字母a或者罗马字母I。

<ul style="list-style:none"可以清楚前面的圆点，list-style-image：url 可以用图片来覆盖掉。

ul/ol li{float;left}可以让ul/ol下的li列表用横向的方法排列。

下面是demo 

<ol type="A">
    <li>222</li>
    <li>222</li>
    <li>222</li>
</ol>

效果如下

覆盖小圆点：

<ul style="list-style-image:url(http://119.10.57.69:880/jnshu269/ol.png)">
    <li>咖啡</li>
    <li>茶
    </li>
    <li>牛奶</li>
</ul>

效果如下

让li标签横向排列，这里我是设置ol下的标签横向排列

ol li{
       float: left;
    margin-left: 2%;
}

效果如下

http://119.10.57.69:880/jnshu269/demo1.html

6.扩展思考

什么情况下用ul，什么情况下用ol？

ul经常用来实现轮播的小按钮，下拉菜单的各种要用来排列的地方，雪碧图，把样式清除，就可以用了，实用范围非常广。 而ol因为他的有序属性，用的范围就比较小了，不是一定要用有序来排列的情况下，一般都是用ul

7.参考文献

参考三：http://www.w3school.com.cn/tags/tag_ol.asp

<ol>标签---W3C

8.更多讨论

怎么用ul创建一个简易的gif

在一个GIF文件中可以存多幅彩色图像，如果把存于一个文件中的多幅图像数据逐幅读出并显示到屏幕上，就可构成一种最简单的动画，易于使用许多 GIF 动画程序创建。缺点：详细的图片和写实摄影图像会丢失颜色信息