本課案例
列表的定義
以統(tǒng)一形式呈現(xiàn)的一組相關(guān)內(nèi)容航唆。
列表的分類(lèi)
無(wú)序列表、有序列表、定義列表和嵌套列表
列表的使用
1.無(wú)序列表（unordered list):<ul></ul>
無(wú)序列表：一組沒(méi)有先后順序的相關(guān)內(nèi)容，即列表中的條目是不分先后名船。
示例：
<h4>常見(jiàn)飲料（排名不分先后）</h4>
<ul type="disc"> <!-- ul : unordered list,聲明無(wú)序列表 -->
<li>咖啡</li> <!-- li : list item,聲明列表項(xiàng)目 -->
<li>茶</li>
<li>牛奶</li>
<li>果汁</li>
</ul>
注：
- 屬性 type = disc| square | circle 用于表示前面的項(xiàng)目符號(hào)，目前HTML4.01已經(jīng)廢棄旨怠。
因?yàn)椴煌臑g覽器的顯示會(huì)有差異渠驼，實(shí)際應(yīng)用中通常使用CSS中的背景圖片來(lái)控制項(xiàng)目符號(hào)的距離和樣式。
無(wú)序列表練習(xí)
- Apples
- Bananas
- Lemons
- Oranges
2.有序列表（ordered list):<ol></ol>
<h4>小寫(xiě)字母列表：</h4>
<ol type="a"> <!-- ol:ordered list,聲明有序列表 -->
<li>Apples</li> <!-- li : list item,聲明列表項(xiàng)目 -->
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
常用屬性示例：
<ol reversed = "reversed" > <!-- 反轉(zhuǎn)編號(hào) -->
<li value="4" > <!-- 雖然不贊成使用value鉴腻，不過(guò)暫時(shí)沒(méi)有用來(lái)替代它的CSS方案 -->
不推薦OL使用的屬性有（用其它辦法解決解決）：
type = "1 | a | A | i | I " 規(guī)定了編號(hào)的樣式迷扇，以后用CSS來(lái)解決。
start = " number " 規(guī)定了編號(hào)的起始值爽哎，用li的value屬性來(lái)解決谋梭。
注：常見(jiàn)CSS代碼為ol { list-style-type : upper-roman | lower-alpha | decimal-leading-zero | lower-greek; }
注意事項(xiàng)
ul+li以及ol+li是一個(gè)整體，因此ul和ol內(nèi)部建議只使用li倦青，li是一個(gè)容器，因而li內(nèi)部可以則可以使用任何標(biāo)簽盹舞。具體見(jiàn)下面代碼：
<ol>
<p>雖然我能正常顯示产镐，但是不建議隘庄！</p>
<li><h3>第一名<h3><p>Apples</p></li>
<li><h3>第二名<h3><p>Bananas</p></li>
<li><h3>第三名<h3><p>Lemons</p></li>
<li><h3>第四名<h3><p>Oranges</p></li>
</ol>
定義列表
工作中，假如需要先定義一個(gè)標(biāo)題癣亚，下面再加以描述丑掺，此時(shí)就需要使用定義列表。
<dl> <!-- definition list:定義列表 -->
<dt>首都</dt> <!-- 定義標(biāo)題：definition title-->
<dd>國(guó)家的行政中心</dd> <!-- 定義描述：definition description-->
<dd>首都也通常是一個(gè)國(guó)家的經(jīng)濟(jì)和文化中心</dd>
<dt>省會(huì)</dt>
<dd>省的行政中心</dd>
<dt>首府</dt>
<dd>少數(shù)民族自治地區(qū)的行政中心</dd>
</dl>
具體效果如圖：
注意事項(xiàng)：
1.由于dl和dt述雾、dd是一個(gè)整體, 因而dl里面不建議放其它標(biāo)簽街州。
2.dd和dt和li標(biāo)簽一樣都屬于容器標(biāo)簽, 里面可以添加任意標(biāo)簽。
3.一個(gè)dt能對(duì)應(yīng)多個(gè)dd, 但是不要多個(gè)dt對(duì)應(yīng)一個(gè)dd是錯(cuò)誤的, 因?yàn)閐d的語(yǔ)義是描述它上面的那一個(gè)dt玻孟。
嵌套列表
有時(shí)唆缴，在列表項(xiàng)目中，還需要繼續(xù)擴(kuò)展列表黍翎，此時(shí)就需要嵌套列表面徽。如下圖
代碼如下：
<h4>一個(gè)嵌套列表：常見(jiàn)飲料</h4>
<ul>
<li>咖啡</li>
<li>茶
<ul>
<li>紅茶</li>
<li>綠茶
<ul>
<li>中國(guó)茶</li>
<li>非洲茶</li>
</ul>
</li>
</ul>
</li>
<li>牛奶</li>
</ul>
注意事項(xiàng)
嵌套列表和定義列表很類(lèi)似，其實(shí)認(rèn)真想想匣掸，他們是有區(qū)別的趟紊。
- 最核心的區(qū)別是，嵌套列表是多個(gè)名詞的集合碰酝，而定義列表是有名詞有描述霎匈。
- 從表現(xiàn)形式上看，他們也有區(qū)別送爸，嵌套列表有項(xiàng)目符號(hào)铛嘱，定義列表每一個(gè)前面都沒(méi)有項(xiàng)目符號(hào)。不過(guò)這一點(diǎn)不能作為辨別標(biāo)準(zhǔn)碱璃，因?yàn)轫?xiàng)目符號(hào)在實(shí)際應(yīng)用中通常用CSS清除掉弄痹。
思考
下圖應(yīng)該用定義列表還是嵌套列表？
