http://www.zhangxinxu.com/wordpress/?p=489
First, can be seen as nonsense foreword
HTML list elements (such as ol, ul, dl) has a very wide range of applications in development and production sites in the holds many lessons, however, their temper in different browsers is not the same. This article is to analyze the basic characteristics of these elements of the list, all kinds of compatibility issues in different browsers, and describes some common applications.
There are certain aspects or CSS experience for beginners colleagues should be helpful.
Two, HTML list elements available in
1, unordered list: ul
unordered list is a list of the most frequently used, following figure shows the unordered list displayed in different browsers:
As shown above, unordered lists in different browser's default setting is a little different. Of course, now in the actual project site is rarely seen without any modification of the unordered list. One reason is that CSS reset (CSS the RESET) , unordered list has the default list bullets, margin or padding are removed.
Certain css property unordered list are list-style-type, list-style-position, and list-style-image. These property sets the type list bullet, mark the position, and the use of pictures instead of marks. These three properties may be combined using the list-style abbreviations.
list-style-type attribute can be set for a number of different values, the following is a chart showing the results page portion of the value:
Depends on the user's browser and the operating system, some list-style-item values might not display properly, usually the default decimal value, with no need to list to achieve incremental value is not recommended, as this "unordered list" of its own semantic gone.
list-style-position mark in the list for the position, Outside may be set (the default) or inside. If the list-style-image is set, it will also affect the position of the image.
list-style-image attribute unordered list can give a unique custom performance, unfortunately, add item number used in this method is a bug IE lot, it is rarely used. A better solution is to add a background image to the li element list, and a corresponding adjustment of the position of the background image, and is set to no-repeat. In maxdesign.com on, step by step explanation has been demonstrated by this method, but also works well in all browsers.
2, ordered list: ol
ordered list using the list item at the time when the front of each list item requires an incremental value (e.g., 1,2,3, etc.). List type list-style-type ordered list may be set to any value can be set at the unordered list. In most cases, ordered list either in front of a incremental value, either unmarked in front. Not recommended to achieve performance similar to an ordered list unordered list. Because of this, an ordered list of semantics itself is no longer correct.
3, definition list: dl
definition list used to mark list items already defined, the definition of which includes a header (dt) and the definition itself (dd). Definition list items do not match exactly, the following code under strict XHTML is perfectly legal:
<DL> <dt> Wireless music microphone cushions exchange </ dt> <dt> Copenhagen </ dt> <dd> "Bodyguards and Assassins" </ dd> </ DL>
Thus, you can use a plurality of single dd dt below, you may be used in a plurality of single dt dd below.
Visual display definition list, by default, the browser displays each nearly the same, as shown below:
Figure corresponding HTML code is as follows:
<dl> <dt>标题 </dt> <dd>这里是定义的内容 </dd> </dl>
<dl>
<dt>热门电影 </dt>
<dd>十月围城 </dd> <dd>刺陵 </dd> <dd>三枪拍案惊奇 </dd> <dd>阿凡达 </dd>
</dl>
<dl>
<dt>热点关注 </dt>
<dd>股市 </dd> <dd>房价 </dd> <dd>元旦 </dd> <dd>曹操墓 </dd>
</dl>
4、过时淘汰的列表：menu&dir
<menu>和<dir>元素，从技术上说，也可以称为“HTML列表”，但它们在XHTML中已过时淘汰了，所以这里不详细讨论它们。
5、HTML5中的列表
在HTML中，无序列表基本上保持不变，虽然似乎现在它被简称为“列表”，新的
元素将被用来包裹列表当作导航使用。
ol元素有轻微的改变，它获得了两个新属性：reversed，这是一个布尔值，用来表示列表是上升还是下降；start，这是个整数，用以宣告有序列表的起点。
此外，<figure>和<details>元素将被增加，它们会有子元素，其中包括<dt>和<dd>元素。
更多关于HTML5方面的知识可以参见淘宝空雁的 揭秘HTML5和CSS3【珍珠奶茶帮】的这篇文章。另外您还可以点击这里查看在线的ppt。
三、浏览器差异
下面展示的都是一些比较常见的且明显的浏览器差异。
1、列表元素添加display:block后
在Internet Explorer 8, Opera 9, Chrome, Firefox 2 & 3, and Safari下，添加display:block会让有序或无序列表中li元素的项目编号消失。
但在IE6和IE7下，添加display:block项目符号依旧存在：
2、列表项目添加float:left
在IE6和IE7下，给列表项目（没有其他样式）添加float:left将会使列表项水平对齐，同时项目符号（或项目编号）消失。如下图所示，截自IE7浏览器
IE8和其他所有浏览器下，列表项会水平对齐，但是项目符号（或项目编号）仍然可见。
当列表项浮动的时候，我们必须记住另外一个要点，就是列表容器（ul元素）在内部仅有浮动元素时会死翘翘，这在所有的浏览器下都会以相同的方式发生，添加overflow:hidden是解决此问题的方法之一。
为了能在不同浏览器下达到大致相同的float:left效果，最好的方法是是使用display:inline。
3、IE下有“Layout”的有序列表
在IE6和IE7下，如果有序列表中的列表项有“Layout”，则有序列表的数值将不会增加，显示为“1”，如下图所示：
hasLayout属性不能被直接设置，但是如果一个元素设置了宽高，浮动，绝对定位等待就会改变haslayout。
4、IE6&IE7下的padding及margin
在大部分的浏览器下，为了移除项目符号或项目编号，让内容左侧对齐显示，需要设置左padding为0，但是这在IE6和IE7下并不管用，在IE6，7下需要设置左margin为0取而代之。见下图：
5、在所以浏览器下实现一致的列表样式
为了避免在不同浏览器下处理列表样式的时候出现问题，最好的方法是使用在前面提到的CSS的重置(css reset)，css reset几乎可以将浏览器所有默认设置差异设置为最小，并允许所有浏览器下都在同样的基础上工作。虽然某些样式下依然存在差异，但是它们不会被当作一个难点来处理了。
另外，正如前面提到了，最好完全避免使用list-style-image属性，而以设置background代替，这是一个跨浏览器的，易于维护的无序列表的自定义符号解决方法。
四、一些实例与应用
1、导航条
迄今为止，无序列表最常见的用途就是导航条，无论是水平的还是垂直的，自从基于表的布局已经过时，无序列表已经被当作导航元素的基础被广泛的应用，原因如下列表所示：
•无序列表属于block水平的元素，不需要再在外面包裹一个div以应用background或其他图形扩展。
•当样式被禁用的时候，列表样式会从容的降级，保持其本来样式，可确保导航项与页面其他内容表现的不一样。
•尽管无序列表不会仅是一个简单的列表，要添加诸如<a>标签之类的元素，但是额外的<li>元素会使导航栏以更灵活的形式表现。
•导航分为列表和/或副列表，允许使用辅助的技术（如屏幕阅读器），用户可以很轻松地跳过整个导航条。
2、下拉菜单
例如前段时间我制作的一个下拉菜单实例：jQuery之使用slideToggle实现垂直下拉菜单
3、照片显示
HTML列表标签ul,li提供了有效的方式显示照片列表，原因与上面导航条提到的一样。下面就是一些以ul,li 标签为HTML基础的的照片画廊或是照片显示组件。
jCarousel
jCarousel照片切换传送jQuery插件提供了可自定义的jQuery功能，使用了无序列表，可以以多种不同的方式显示传送效果。我已经将此插件翻译成中文，您可以狠狠地点击这里：jCarousel中文demo首页
InnerFade – jQuery
innerfade插件能让任意列表形式的内容依次淡入淡出切换显示，或是上下切换显示。内容可以是文字，图片等。支持各式标签，列表标签ul,li或是div，p标签都可以。
可以非常轻松的实现诸如新闻或公告内容的自动随机切换显示，或是图片幻灯片的播放显示等。下图展示的是图片幻灯片切换的过渡阶段:
此插件demo狠狠地点击这里： InnerFade demo页面
4、代码高亮
许多博客和教程网站含有JavaScript高亮代码的都是转换pre元素或textarea元素为有序列表，如下面的截图。其中有名的一款代码高亮插件是Alex Gorbatchev’s SyntaxHighlighter。
下为类似高亮插件的效果截图：
您可以点击这里预览效果（demo页面展示的是jQuery cookie插件代码）。
5、博客评论
博客评论，包括这些WordPress驱动的站点，以有序列表构建，提供非常灵活的样式选项，并奠定了评论嵌套的基础。下图截自腾讯CDC T.d 昨天发布的The Story of Mr.Gray — Web 交互设计“灰色”的8类应用一文评论部分。
6、商品列表
最典型的代表莫过于淘宝网首页的“宝贝类目”一栏的万千商品类目的显示：
从截图可以看出，这里类目的显示使用的是dl,dt,dd定义列表实现的。
7、其他
列表元素的其他应用还有很多，例如多图片上传的进度条，CSS步骤菜单，重叠菜单等等。这里就不一一展示了。
五、可有可无的总结
HTML标签元素就是砖砖瓦瓦，看上去很一般，但是到了优秀的设计师手里和优秀的工人那里就会发挥出无限的潜力与魅力，于是有了我们多姿多彩的互联网。列表元素也是如此，虽然还有几十更多的用途和技术可以在本文中讨论，但是本文展示的一些东西以让我们彻底的了解HTML中列表标签元素的的概貌，帮助您用列表这类砖瓦构建出漂亮的“互联网建筑”。
Sixth, the reference reading and Further Reading
• at The Listamatic
• CSS Design: Taming Lists
• CSS Lists ON W3Schools
• Definition Lists - misused or Misunderstood?
• CSS-Styled Lists: 20+ the Demos, Tutorials and Best Practices
• List Elements ON Sitepoint's HTML Reference
Reproduced in: https: //www.cnblogs.com/JoannaQ/archive/2013/03/27/2983845.html