一般我们在做列表的时候通常只会用到ul和li标签,至于DL一般都很少用到，它也属于列表类的标签，下面说一下大概的用法：
<dl>标记定义了一个定义列表，定义列表中的条目是通过使用<dt>标记(“definition title”，定义标题)和<dd>标记(“definition description”，定义描述)创建的。<dt>给出了术语名，<dd>标记给出了术语的定义。也就是说<dt>用来创建列表中的上层项目，<dd>用来创建列表中最下层项目，<dt>和<dd>都必须放在<dl>< /dl>标志对之间。<dl><dt>我们在做列表标题</dt><dd>我们在做列表</dd><dd>我们在做列表</dd><dd>我们在做列表</dd><dd>我们在做列表</dd></dl>
DIV CSS网页布局中常用的列表元素ul ol li dl dt dd释义，块级元素div尽量少用，和table一样，嵌套越少越好
ol 有序列表。
<ol>
<li>……</li><li>……</li><li>……</li></ol>表现为：1……2……3……ul 无序列表，表现为li前面是大圆点而不是123<ul><li>……</li><li>……</li></ul>很多人容易忽略 dl dt dd的用法 dl 内容块dt 内容块的标题dd 内容可以这么写：<dl><dt>标题</dt><dd>内容1</dd><dd>内容2</dd></dl>dt 和dd中可以再加入 ol ul li和p理解这些以后，在使用div布局的时候，会方便很多 dl：代表HTML自定义列表 dt：代表HTML自定义列表组 dd：HTML自定义列表描述dt主要放label部分，dd主要放input或其他。
注意：和label布局一样，有IE的3px BUG。
HTML代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>使用dl,dt,dd布局的演示</title><style type="text/css" media="all">* {
margin:0;padding:0;}input,select {
font-family:Arial, Helvetica, sans-serif; font-size: 12px;}.required {
font:0.8em Verdana !important;color:#f68622;}.explain {
color:#808080;}.b {
font-weight:bold;font-size:12px;}.democss {
font:11px/12px Arial, Helvetica, sans-serif;color:#333;}.democss dl {
width:420px;}.democss dt {
width: 110px;float: left;padding:4px;padding-top:8px; text-align:right;}.democss dd{
margin:0 0 0 118px;padding:4px;text-align:left;}.democss input {
width:180px;}.democss select#content {
width:185px;}.democss input.submit {
width:70px;}div#submit {
width:298px;text-align:left;padding:4px;padding-left:122px;}* html .democss input,* html .democss select{
margin-left: -3px; }* html div#submit input{
margin-left: 0px;}</style>
</head><body>
<form id="demoform" class="democss" action=""><dl>
<dt><span class="required">*</span> <label for="fname" accesskey="F">First name:</label></dt><dd><input type="text" id="fname" value="" /></dd><dt><span class="required">*</span> <label for="lname" accesskey="L">Last name:</label></dt><dd><input type="text" id="lname" value="" /></dd><dt><span class="required">*</span> <label for="content" accesskey="C">Preferred content:</label></dt><dd><select name="content" id="content"><option value="us" selected="selected">Yahoo! U.S.</option><option value="e1">Yahoo! U.S. in Spanish</option><option value="b5">Yahoo! U.S. in Chinese</option><option value="cn">Yahoo! China</option><option value="uk">Yahoo! United Kingdom</option><option value="ar">Yahoo! Argentina</option><option value="aa">Yahoo! Asia</option><option value="au">Yahoo! Australia</option> <option value="br">Yahoo! Brazil</option><option value="ca">Yahoo! Canada in English</option><option value="cf">Yahoo! Canada in French</option><option value="fr">Yahoo! France</option><option value="de">Yahoo! Germany</option><option value="hk">Yahoo! Hong Kong</option><option value="in">Yahoo! India</option><option value="it">Yahoo! Italy</option><option value="kr">Yahoo! Korea</option><option value="mx">Yahoo! Mexico</option><option value="sg">Yahoo! Singapore</option><option value="es">Yahoo! Spain</option><option value="tw">Yahoo! Taiwan</option></select></dd><dt><span class="required">*</span> <label for="sex" accesskey="G">Gender:</label></dt><dd><select name="sex" id="sex"><option value="">[Select] </option><option value="m">Male</option><option value="f">Female</option></select></dd><dt><span class="required">*</span> <label for="yid" accesskey="Y">Yahoo! ID:</label></dt><dd><input type="text" value="" id="yid"> <span class="b">@yahoo.com</span><br /><span class="explain">ID may consist of a-z, 0-9, underscores, and a single dot (.)</span></dd><dt><span class="required">*</span> <label for="pw" accesskey="P">Password:</label></dt><dd><input type="password" value="" id="pw" /><br /><span class="explain">Six characters or more; capitalization matters!</span></dd><dt><span class="required">*</span> <label for="pw2" accesskey="R">Re-type password:</label></dt><dd><input type="password" value="" id="pw2"/></dd></dl><div id="submit">
<input type="submit" value="Submit" class="submit"/> <input type="reset" value="Reset" class="submit"/></div></form>
</body></html></html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>definition list fun</title> <style type="text/css"> /* Key style rules */ dl, dl * { margin: 0; } dt { display: run-in; } dt::after { content: "AA"; } /* the line-breaks */ dd { display: block; } /* Your own style rules */ dl { font-family: Verdana; font-size: small; display: block; width: 400px; } dt { border-bottom: 1px dotted #000; } dd { background-color: lightgrey; outline: 1px solid darkgrey; padding: 10px 50px 10px 10px; } </style></head><body><dl>
<dt>CSS</dt><dd>A styling language by the W3C to facilitate semantic markup.</dd> <dt>XSL</dt><dd>An alternative styling language based on XML by the W3C.</dd> <dt>SVG</dt><dd>A markup language for describing vector graphics by the W3C.</dd></dl></body>
</html>