在頁面布局時(shí)，經(jīng)常會(huì)用到列表，列表分為有序列表、無序列表和自定義列表，那你知道有序列表、無序列表和自定義列表之間的區(qū)別嗎？這篇文章就給大家介紹有序列表、無序列表和自定義列表分別用什么標(biāo)簽，以及三者之間的區(qū)別，有一定的參考價(jià)值，感興趣的朋友可以看看。

一、無序列表

<ul> 標(biāo)簽用來定義無序列表，將 <ul> 標(biāo)簽與 <li> 標(biāo)簽一起使用，就可以創(chuàng)建無序列表。

舉例：用無序列表列舉四大名著，代碼如下：

<ul>
   <li>紅樓夢</li>
   <li>水滸傳</li>
   <li>三國演義</li>
   <li>西游記</li>
</ul>

效果圖：

無序列表屬性type，默認(rèn)的樣式是小黑圓，就是disc，type屬性有disc（實(shí)心圓默認(rèn)）、circle（空心圓）、square（實(shí)心正方形）、none（取消前綴）。

二、有序列表

<ol> 標(biāo)簽可以定義有序列表，將 <ol> 標(biāo)簽與 <li> 標(biāo)簽一起使用，就可以創(chuàng)建有序列表，列表排序以數(shù)字來顯示。

示范代碼如下：

<ol>
   <li>紅樓夢</li>
   <li>水滸傳</li>
   <li>三國演義</li>
   <li>西游記</li>
</ol>

效果圖：

有序列表有兩個(gè)屬性，分別是type和start。 type有五個(gè)屬性值：1、a、A、i、I(羅馬數(shù)字)，用來表示列表前綴的樣式。start表示從type類型的第幾個(gè)數(shù)字開始，比如當(dāng)type=“a”，start=“4”，指選擇的是小寫字母類型，從第四個(gè)字母d開始列舉。

三、自定義列表

<dl> 標(biāo)簽可以定義描述列表，<dl> 標(biāo)簽與 <dt> 和 <dd> 一起使用，創(chuàng)建自定義列表（描述列表）。

示范代碼如下：

<dl>
     <dt>中國四大名著</dt>
       <dd>紅樓夢</dd>
      <dd>西游記</dd>
       <dd>水滸傳</dd>
       <dd>三國演義</dd>
</dl>

效果圖：

自定義列表（描述列表）中，在dt和dd中有了一個(gè)縮進(jìn)。

有序列表、無序列表和自定義列表的區(qū)別：

有序列表和無序列表都有前綴，但是有序列表是大寫字母、小寫字母、數(shù)字和羅馬數(shù)字等，而無序列表的前綴是實(shí)心圓、空心圓、實(shí)心正方形。自定義列表與有序列表，無序列表的區(qū)別是它有縮進(jìn)而沒有前綴。

【相關(guān)教程推薦】

1. CSS3視頻教程
2. CSS在線手冊
3. bootstrap教程

以上就是圖文詳解HTML中有序列表、無序列表和自定義列表的區(qū)別的詳細(xì)內(nèi)容，更多請關(guān)注php中文網(wǎng)其它相關(guān)文章！