一、無(wú)序列表

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

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

<ul>
   <li>紅樓夢(mèng)</li>
   <li>水滸傳</li>
   <li>三國(guó)演義</li>
   <li>西游記</li>
</ul>

效果圖：

無(wú)序列表屬性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ù)字來(lái)顯示。

示范代碼如下：

<ol>
   <li>紅樓夢(mèng)</li>
   <li>水滸傳</li>
   <li>三國(guó)演義</li>
   <li>西游記</li>
</ol>

效果圖：

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

三、自定義列表

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

示范代碼如下：

<dl>
     <dt>中國(guó)四大名著</dt>
       <dd>紅樓夢(mèng)</dd>
      <dd>西游記</dd>
       <dd>水滸傳</dd>
       <dd>三國(guó)演義</dd>
</dl>

效果圖：

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

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

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

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

1. CSS3視頻教程
2. CSS在線手冊(cè)
3. bootstrap教程

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