ol ul dl 标签使用方法汇总

在建设网站的过程中，我们经常需要用到列表标签，常见的比如ol、ul以及dl等，不同的列表标签有着不同的含义和使用方法，今天我们就来总结一下网站中列表标签的见使用方法。

ol：有序列表-按顺序显示步骤的列表

应用场景：使用有序列表来显示流程中的步骤顺序。

示例代码：

<ol>
<li>步骤一</li>
<li>步骤二</li>
</ol>


ul：无序列表-类似于并列关系，之间没有先后顺序之分

应用场景：使用无序列表来显示清单或者列出注意事项等。

示例代码：

<ul>
<li>注意事项一</li>
<li>注意事项二</li>
</ul>


同时也可以使用ul和li 元素对链接进行分组。

示例代码：

<h2>产品类别</h2>
<ul>
<li><a href="/">产品01</a></li>
<li><a href="/">产品01</a></li>
</ul>


备注：可以使用CSS 设置列表元素的样式。

比如：清除列表样式和内外边距，内外边距设置为0是为了消除默认的边距;

ul, li{
list-style: none;
padding: 0;
margin:0;
}


另外，需要注意的是如果要设置浮动，则一般在a层级设置，主要是为了兼容不同版本的浏览器。

比如：

ul li a {float:left;}

dl：对名词进行定义，或者解释、描述

使用范围：使用定义列表将对特定术语进行解释。

示例代码：

<dl>
<dt>SEO</dt>
<dd>SEO 是指搜索引擎优化...
</dd>
</dl>


同时也可以做联系信息中的定义列表

示例代码：

<dl>
<dt><span>姓名:</span></dt><dd><span>张三</span></dd>
<dt><span> 电话:</span></dt><dd><span>12345678</span></dd>
</dl>


备注：span用于定义样式，但不是必需的。

对于不同的使用场景，我们尽量区别使用这些列表标签，虽然比较繁琐，但是可以帮助我们使网页代码更加的规范，更有利于SEO优化。

参考资料：Using ol, ul and dl for lists or groups of links