本課案例
image.png
列表的定義
以統(tǒng)一形式呈現(xiàn)的一組相關(guān)內(nèi)容。
列表的分類
無序列表、有序列表、定義列表和嵌套列表
列表的使用
1.無序列表（unordered list):<ul></ul>
無序列表：一組沒有先后順序的相關(guān)內(nèi)容，即列表中的條目是不分先后。
示例：
<h4>常見飲料（排名不分先后）</h4>
<ul type="disc"> <!-- ul : unordered list,聲明無序列表 -->
<li>咖啡</li> <!-- li : list item,聲明列表項目 -->
<li>茶</li>
<li>牛奶</li>
<li>果汁</li>
</ul>
注：
- 屬性 type = disc| square | circle 用于表示前面的項目符號，目前HTML4.01已經(jīng)廢棄。
因為不同的瀏覽器的顯示會有差異，實際應(yīng)用中通常使用CSS中的背景圖片來控制項目符號的距離和樣式。
無序列表練習(xí)
- Apples
- Bananas
- Lemons
- Oranges
2.有序列表（ordered list):<ol></ol>
<h4>小寫字母列表：</h4>
<ol type="a"> <!-- ol:ordered list,聲明有序列表 -->
<li>Apples</li> <!-- li : list item,聲明列表項目 -->
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
常用屬性示例：
<ol reversed = "reversed" > <!-- 反轉(zhuǎn)編號 -->
<li value="4" > <!-- 雖然不贊成使用value，不過暫時沒有用來替代它的CSS方案 -->
不推薦OL使用的屬性有（用其它辦法解決解決）：
type = "1 | a | A | i | I " 規(guī)定了編號的樣式，以后用CSS來解決。
start = " number " 規(guī)定了編號的起始值，用li的value屬性來解決。
注：常見CSS代碼為ol { list-style-type : upper-roman | lower-alpha | decimal-leading-zero | lower-greek; }
注意事項
ul+li以及ol+li是一個整體，因此ul和ol內(nèi)部建議只使用li，li是一個容器，因而li內(nèi)部可以則可以使用任何標(biāo)簽。具體見下面代碼：
<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>
定義列表
工作中，假如需要先定義一個標(biāo)題，下面再加以描述，此時就需要使用定義列表。
<dl> <!-- definition list:定義列表 -->
<dt>首都</dt> <!-- 定義標(biāo)題：definition title-->
<dd>國家的行政中心</dd> <!-- 定義描述：definition description-->
<dd>首都也通常是一個國家的經(jīng)濟(jì)和文化中心</dd>
<dt>省會</dt>
<dd>省的行政中心</dd>
<dt>首府</dt>
<dd>少數(shù)民族自治地區(qū)的行政中心</dd>
</dl>
具體效果如圖：
image.png
注意事項：
1.由于dl和dt、dd是一個整體, 因而dl里面不建議放其它標(biāo)簽。
2.dd和dt和li標(biāo)簽一樣都屬于容器標(biāo)簽, 里面可以添加任意標(biāo)簽。
3.一個dt能對應(yīng)多個dd, 但是不要多個dt對應(yīng)一個dd是錯誤的, 因為dd的語義是描述它上面的那一個dt。
嵌套列表
有時，在列表項目中，還需要繼續(xù)擴展列表，此時就需要嵌套列表。如下圖
image.png
代碼如下：
<h4>一個嵌套列表：常見飲料</h4>
<ul>
<li>咖啡</li>
<li>茶
<ul>
<li>紅茶</li>
<li>綠茶
<ul>
<li>中國茶</li>
<li>非洲茶</li>
</ul>
</li>
</ul>
</li>
<li>牛奶</li>
</ul>
注意事項
嵌套列表和定義列表很類似，其實認(rèn)真想想，他們是有區(qū)別的。
- 最核心的區(qū)別是，嵌套列表是多個名詞的集合，而定義列表是有名詞有描述。
- 從表現(xiàn)形式上看，他們也有區(qū)別，嵌套列表有項目符號，定義列表每一個前面都沒有項目符號。不過這一點不能作為辨別標(biāo)準(zhǔn)，因為項目符號在實際應(yīng)用中通常用CSS清除掉。
思考
下圖應(yīng)該用定義列表還是嵌套列表？
image.png
