在html頁(yè)面中,，列表可以起到提綱寫領(lǐng)的作用。列表分為兩種類型,，一是有序列表,，一是無(wú)序列表。前者用項(xiàng)目符號(hào)來(lái)標(biāo)記無(wú)序的項(xiàng)目,，而后者則使用編號(hào)來(lái)記錄項(xiàng)目的順序,。

所謂有序，指的是按照數(shù)字或字母等順序排列列表項(xiàng)目,。
所謂無(wú)序,，是指以●、○,、□等開頭的,，沒(méi)有順序的列表項(xiàng)目。
關(guān)于列表的主要標(biāo)記,，如下表所示：

標(biāo)記	描述
<ul>	無(wú)序列表
<ol>	有序列表
<dir>	目錄列表
<dl>	定義列表
<menu>	菜單列表
<dt>,、<dd>	定義列表的標(biāo)記
<li>	列表項(xiàng)目的標(biāo)記

有序列表使用編號(hào),，而不是項(xiàng)目符號(hào)來(lái)編排項(xiàng)目,。列表中的項(xiàng)目采用數(shù)字或英文字母開頭，通常各項(xiàng)目間有先后的順序性,。在有序列表中,，主要使用<ol>和<li>兩個(gè)標(biāo)記以及type和兩個(gè)start屬性。

通過(guò)<ol>和<li>標(biāo)記建立有序列表,。

基本語(yǔ)法：
<ol>
<li>項(xiàng)目一
<li>項(xiàng)目二
<li>項(xiàng)目三
……
</ol>

語(yǔ)法解釋：
在有序列表中,，使用<ol>作為有序的聲明，使用<li>作為每一個(gè)項(xiàng)目的起始,。

<H2>圖像設(shè)計(jì)軟件</H2>
<OL>
<LI>Photoshop
<LI>Illustrator
<LI>Freehand
<LI>CorelDraw </LI></OL>

圖像設(shè)計(jì)軟件

1. Photoshop
2. Illustrator
3. Freehand
4. CorelDraw

在有序列表的默認(rèn)情況下，使用數(shù)字序號(hào)作為列表的開始,，我們可以通過(guò)type屬性將有序列表的類型設(shè)置為英文或羅馬字母,。

通過(guò)type屬性設(shè)定有序列表編號(hào)的類型。

基本語(yǔ)法：
<ol type=value>
</ol>

語(yǔ)法解釋：
其中value的值如下表所示

<H2>圖像設(shè)計(jì)軟件</H2>
<OL type=A>
<LI>Photoshop
<LI>Illustrator
<LI>Freehand
<LI>CorelDraw </LI></OL>

圖像設(shè)計(jì)軟件

1. Photoshop
2. Illustrator
3. Freehand
4. CorelDraw

在默認(rèn)的情況下，有序列表從數(shù)字1開始記數(shù),，這個(gè)起始值通過(guò)start屬性可以調(diào)整,，并且英文字母和羅馬字母的起始值也可以調(diào)整。

通過(guò)start屬性設(shè)定有序列表的起始編號(hào),。

基本語(yǔ)法：
<ol start=value>
</ol>

語(yǔ)法解釋：
其中不論列表編號(hào)的類型是數(shù)字,、英文字母還是羅馬字母，value的值都是其始的數(shù)字,。

<H2>圖像設(shè)計(jì)軟件</H2>
<OL start=5>
<LI>Photoshop
<LI>Illustrator
<LI>Freehand
<LI>CorelDraw </LI></OL>

<H2>圖像設(shè)計(jì)軟件</H2>
<OL type=a start=3>
<LI>Photoshop
<LI>Illustrator
<LI>Freehand
<LI>CorelDraw </LI></OL>

圖像設(shè)計(jì)軟件

5. Photoshop
6. Illustrator
7. Freehand
8. CorelDraw

圖像設(shè)計(jì)軟件

3. Photoshop
4. Illustrator
5. Freehand
6. CorelDraw

在無(wú)序列表中，各個(gè)列表項(xiàng)之間沒(méi)有順序級(jí)別之分,，它通常使用一個(gè)項(xiàng)目符號(hào)作為每個(gè)列表項(xiàng)的前綴,。無(wú)序列表主要使用<ul>,、<dir>、<dl>,、<menu>,、<li>幾個(gè)標(biāo)記和type屬性。

通過(guò)<ul>和<li>標(biāo)記建立無(wú)序列表,。

基本語(yǔ)法：
<ul>

<li>項(xiàng)目一
<li>項(xiàng)目二
<li>項(xiàng)目三
……
</ul>

語(yǔ)法解釋：
在無(wú)序列表中,，使用<ul>作為無(wú)序的聲明，使用<li>作為每一個(gè)項(xiàng)目的起始,。

<H2>圖像設(shè)計(jì)軟件</H2>
<UL>
<LI>Photoshop
<LI>Illustrator
<LI>Freehand
<LI>CorelDraw </LI></UL>

圖像設(shè)計(jì)軟件

• Photoshop
• Illustrator
• Freehand
• CorelDraw

目錄列表用于顯示文件內(nèi)容的目錄大綱，通常用于設(shè)計(jì)一個(gè)壓縮窄列的列表,，用于顯示一系列的列表內(nèi)容,，例如字典中的索引或單詞表中的單詞等。列表中每項(xiàng)至多只能有20個(gè)字符,。

通過(guò)<dir>和<li>標(biāo)記建立目錄列表,。

基本語(yǔ)法：
<dir>
<li>項(xiàng)目一
<li>項(xiàng)目二
<li>項(xiàng)目三
……
</dir>
語(yǔ)法解釋：
在目錄列表中，使用<dir>作為目錄列表的聲明,，使用<li>作為每一個(gè)項(xiàng)目的起始,。

<H2>圖像設(shè)計(jì)軟件</H2>
<dir>
<LI>Photoshop
<LI>Illustrator
<LI>Freehand
<LI>CorelDraw </LI></dir>

圖像設(shè)計(jì)軟件

定義列表是一種兩個(gè)層次的列表,，用于解釋名詞的定義,，名詞為第一層次，解釋為第二層次,，并且不包含項(xiàng)目符號(hào),。定義列表也稱為字典列表，因?yàn)樗c字典具有相同的格式,。在定義列表中,，每個(gè)列表項(xiàng)帶有一個(gè)縮進(jìn)的定義字段，就好象字典對(duì)文字進(jìn)行解釋一樣,。

通過(guò)<dl>,、<dt>、<dd>標(biāo)記建立定義列表,。

基本語(yǔ)法：
<dl>
<dt>名詞一<dd>解釋一
<dt>名詞二<dd>解釋二
<dt>名詞三<dd>解釋三
……
</dl>

語(yǔ)法解釋：
在定義列表中,，使用<dl>作為定義列表的聲明，使用<dt>作為名詞的標(biāo)題,，<dd>用來(lái)解釋名詞,。

<H2>圖像設(shè)計(jì)軟件</H2>
<DL>
<DT>Photoshop
<DD>Adobe公司的圖像處理軟件
<DT>Illustrator
<DD>Adobe公司的矢量繪圖軟件
<DT>Freehand
<DD>Macromedia公司的矢量繪圖軟件
<DT>CorelDraw
<DD>Corel公司的圖形圖像軟件 </DD></DL>

圖像設(shè)計(jì)軟件

Photoshop

Adobe公司的圖像處理軟件

Illustrator

Adobe公司的矢量繪圖軟件

Freehand

Macromedia公司的矢量繪圖軟件

CorelDraw

Corel公司的圖形圖像軟件

菜單列表用于顯示菜單內(nèi)容,，設(shè)計(jì)單列的菜單,。在Internet Explorer瀏覽器中的顯示和無(wú)序列表是相同的,。

通過(guò)<menu>和<li>標(biāo)記建立目錄列表。

基本語(yǔ)法：
<menu>
<li>項(xiàng)目一
<li>項(xiàng)目二
<li>項(xiàng)目三
……
</menu>

語(yǔ)法解釋：
在菜單列表中,，使用<menu>作為菜單列表的聲明,，使用<li>作為每一個(gè)項(xiàng)目的起始。

<H2>圖像設(shè)計(jì)軟件</H2>
<MENU>
<LI>Photoshop
<LI>Illustrator
<LI>Freehand
<LI>CorelDraw </LI></MENU>

圖像設(shè)計(jì)軟件

在無(wú)序列表的默認(rèn)情況下,，使用●作為列表的開始,，我們可以通過(guò)TYPE屬性將無(wú)序列表的類型設(shè)置為○或□,。

通過(guò)type屬性設(shè)定無(wú)序列表編號(hào)的類型。

基本語(yǔ)法：
<ul type=value>
</ul>

語(yǔ)法解釋：
其中value的值如下表所示

<H2>圖像設(shè)計(jì)軟件</H2>
<ul type=circle>
<LI>Photoshop
<LI>Illustrator
<LI>Freehand
<LI>CorelDraw </LI></ul>
<H2>圖像設(shè)計(jì)軟件</H2>
<ul type=square>
<LI>Photoshop
<LI>Illustrator
<LI>Freehand
<LI>CorelDraw </LI></ul>

圖像設(shè)計(jì)軟件

• Photoshop
• Illustrator
• Freehand
• CorelDraw

圖像設(shè)計(jì)軟件

• Photoshop
• Illustrator
• Freehand
• CorelDraw

嵌套列表指的是多于一級(jí)層次的列表,，一級(jí)項(xiàng)目下面可以存在二級(jí)項(xiàng)目,、三級(jí)項(xiàng)目等。項(xiàng)目列表可以進(jìn)行嵌套,，以實(shí)現(xiàn)多級(jí)項(xiàng)目列表的形式,。定義列表是一種兩個(gè)層次的列表，用于解釋名詞的定義,，名詞為第一層次,，解釋為第二層次，并且不包含項(xiàng)目符號(hào),。

通過(guò)<dl>,、<dt>、<dd>標(biāo)記建立定義列表的嵌套,。

基本語(yǔ)法：
<dl>
<dt>名詞一
<dd>解釋一
<dd>解釋二
<dd>解釋三
<dt>名詞二
<dd>解釋一
<dd>解釋二
<dd>解釋三
……
</dl>

語(yǔ)法解釋：
在定義列表中,，一個(gè)<dt>標(biāo)記下可以有多個(gè)<dd>標(biāo)記作為名詞的解釋和說(shuō)明，以實(shí)現(xiàn)定義列表的嵌套,。

<H2>圖像設(shè)計(jì)軟件</H2>
<DL>
<DT><U>Photoshop</U>
<DD>Adobe公司出品
<DD>圖像處理軟件
<DT><U>Illustrator</U>
<DD>Adobe公司出品
<DD>矢量繪圖軟件
<DT><U>Freehand</U>
<DD>Macromedia公司出品
<DD>矢量繪圖軟件
<DT><U>CorelDraw</U>
<DD>Corel公司出品
<DD>圖形圖像軟件 </DD></DL>

圖像設(shè)計(jì)軟件

Photoshop

Adobe公司出品

圖像處理軟件

Illustrator

Adobe公司出品

矢量繪圖軟件

Freehand

Macromedia公司出品

矢量繪圖軟件

CorelDraw

Corel公司出品

圖形圖像軟件

這種嵌套類型是最常見的列表嵌套,，重復(fù)地使用<ol>和<ul標(biāo)記可以組合出嵌套列表,。

通過(guò)<ol>和<ul>標(biāo)記建立列表的嵌套,。

<UL type=square>
<LI><U>圖像設(shè)計(jì)軟件</U>
<OL type=I>
<LI>Photoshop
<LI>Illustrator
<LI>Freehand
<LI>CorelDraw </LI></OL>
<LI><U>網(wǎng)頁(yè)制作軟件</U>
<OL type=I>
<LI>Dreamweaver
<LI>Frontpage
<LI>Golive </LI></OL>
<LI><U>網(wǎng)頁(yè)動(dòng)畫軟件</U>
<OL type=I>
<LI>Flash
<LI>LiveMotion </LI></OL></LI></UL>

• 圖像設(shè)計(jì)軟件
  1. Photoshop
  2. Illustrator
  3. Freehand
  4. CorelDraw
• 網(wǎng)頁(yè)制作軟件
  1. Dreamweaver
  2. Frontpage
  4. Golive
• 網(wǎng)頁(yè)動(dòng)畫軟件
  1. Flash
  2. LiveMotion