首页>>网站建设>>Javascript>>经验笔记

HTML列表

在HTML文档中，常用到的还有列表，HTML列表可以分为有序列表、无序列表以及自定义列表。

一、有序列表

什么叫有序列表呢？有序列表就是用数字来标识每一行文本，就像如下：

1、有序列表

2、无序列表

3、自定义列表

以上就是一个有序列表，有序就是说有顺序。

使用的时候代码如下：

<ol>        <!--有序列表的最大闭合标签-->
<li>有序列表</li>   <!--有序列表的项-->
<li>无序列表</li>   <!--有序列表的项-->
<li>自定义列表</li>   <!--有序列表的项-->
<li>。。。。</li>   <!--可以无限制增加-->
</ol>

需要有序化的项都放在<ol>闭合标签中即可。


二、无序列表

无序列表用法与有序列表基本相同，只是最大的闭合标签不同，无序列表是放<ul>在中，定义如下：

<ul>        <!--无序列表的最大闭合标签-->
<li>有序列表</li>   <!--无序列表的项-->
<li>无序列表</li>   <!--无序列表的项-->
<li>自定义列表</li>   <!--无序列表的项-->
<li>。。。。</li>   <!--可以无限制增加-->
</ul>

显示的时候前面不是数字，而是圆点之类的符号，就像如下：



如果不想用圆点来标识你可以通过<ul>的type属性来更换成其他项目符号；


三、自定义列表

如果以上两种的列表不能满足你的需求的话，你就可以使用自定义列表，但是现实中非常少用。

用法同以上类似，只是标签以<dl>闭合标签来容纳，其中的项用<dt>来定义，并且增加了一个的子项<dd>，这个标签是用来定义项的。

直接上实例，通过实例你将会很容易理解：

<dl>
<dt>列表项1</dt>
<dd>- 有序列表</dd>
<dt>列表项2</dt>
<dd>- 无序列表</dd>
<dd>- 自定义列表</dd>
</dl>

显示如下：



怎么样，小伙伴们，动手试试吧~