html5中的列表有3種：1、無(wú)序列表，使用“<ul>”和“<li>”標(biāo)簽來(lái)定義；2、有序列表，使用“<ol>”和“<li>”標(biāo)簽來(lái)定義；3、定義列表，使用“<dl>”、“<dt>”和“<dd>”標(biāo)簽來(lái)定義。

本教程操作環(huán)境：windows7系統(tǒng)、HTML5版、Dell G3電腦。

無(wú)序列表(unordered list)

作用: 給一堆內(nèi)容添加無(wú)序列表語(yǔ)義(一個(gè)沒(méi)有先后順序整體), 列表中的條目是不分先后

格式：

li 英文是 list item, 翻譯為列表項(xiàng)

<h4>選擇居住城市(CN)</h4> <ul>   <li>北京</li>   <li>上海</li>   <li>廣州</li>   <li>鐵嶺</li> </ul>

ul應(yīng)用場(chǎng)景:

• 導(dǎo)航條

• 商品列表等

• 新聞列表

注意事項(xiàng):

• 這里指的無(wú)序是指對(duì)于主體來(lái)說(shuō)內(nèi)容沒(méi)有先后之分, 例如主題是”選擇居住城市(CN)”北京上海都是中國(guó)的城市, 無(wú)論誰(shuí)放在前面它都還是中國(guó)的城市的. 如果標(biāo)題改為”中國(guó)霧霾排行”, 那么就必須有嚴(yán)格的排名,北京必須寫(xiě)在前面

• 瀏覽器會(huì)給無(wú)需列表自動(dòng)添加先導(dǎo)符號(hào)但是一定一定千萬(wàn)千萬(wàn)要記住, ul的作用并不是給文字添加小圓點(diǎn), 而是增加無(wú)序列表的語(yǔ)義

  • 其實(shí)ul還有一個(gè)type屬性, 可以修改先導(dǎo)符號(hào)的樣式, 取值有disc、square、circle幾種

  • 但是由于樣式將來(lái)都是通過(guò)css來(lái)完成, 所以這里就不給大家介紹了

• ul是一個(gè)組標(biāo)簽, 一定是一坨一坨的出現(xiàn), 也就是說(shuō)li標(biāo)簽不能單獨(dú)存在, 必須包裹在ul里面

• 由于ul和li是一個(gè)整體, 所以u(píng)l里面不推薦包裹其它標(biāo)簽, 永遠(yuǎn)記住ul里面最好只寫(xiě)li標(biāo)簽

• 雖然ul中推薦只能寫(xiě)li標(biāo)簽, 但是li標(biāo)簽是一個(gè)容器標(biāo)簽, li標(biāo)簽中可以添加任意標(biāo)簽, 甚至可以添加ul標(biāo)簽

<ul>   <li>       好吃的       <ul>           <li>牛奶</li>           <li>面包</li>       </ul>   </li>   <li>       日用的       <ul>           <li>毛巾</li>           <li>牙膏</li>       </ul>   </li> </ul>

有序列表(ordered list)

作用: 給一堆內(nèi)容添加有序列表語(yǔ)義(一個(gè)有順序整體), 列表中的條目有先后之分

• 格式:

  <h4>中國(guó)房?jī)r(jià)排行</h4>   <ol>       <li>北京</li>       <li>上海</li>       <li>廣州</li>       <li>鐵嶺</li>   </ol>

ol應(yīng)用場(chǎng)景:

• xxx排行榜

• 其實(shí)ol應(yīng)用場(chǎng)景并不多, 因?yàn)槟苡胦l做的用ul都能做

注意事項(xiàng):

• ol和ul就是語(yǔ)義不一樣，怎么使用都是一樣的以及注意點(diǎn)都一樣

• 其實(shí)ul還有兩個(gè)常見(jiàn)屬性start、type屬性, 可以修改先導(dǎo)符號(hào)的樣式和序號(hào)

• 但是由于樣式將來(lái)都是通過(guò)css來(lái)完成, 所以這里就不給大家介紹了

定義列表(definition list)

作用: 給一堆內(nèi)容添加列表語(yǔ)義, 通過(guò)dt羅列出列表的條目, 然后再通過(guò)dd給每個(gè)條目進(jìn)行相應(yīng)的描述

格式:

• dt英文definition title, 翻譯為定義標(biāo)題

• dd英文definition description, 翻譯為定義描述信息

<dl>   <dt>北京</dt>   <dd>國(guó)家的首都, 看升國(guó)旗的地方</dd>   <dt>上海</dt>   <dd>魔都, 遍地是黃金的地方</dd> </dl>

dl應(yīng)用場(chǎng)景:

• 網(wǎng)站底部相關(guān)信息

• 但凡看到一堆內(nèi)容都是用于描述某一個(gè)內(nèi)容的時(shí)候就要想到dl

注意事項(xiàng):

– dl是一個(gè)`組標(biāo)簽`, 一定是一坨一坨的出現(xiàn), 也就是說(shuō)dt和dd標(biāo)簽不能單獨(dú)存在, 必須包裹在dl里面

• 由于dl和dt、dd是一個(gè)整體, 所以dl里面不推薦包裹其它標(biāo)簽

• dd和dt和li標(biāo)簽一樣是容器標(biāo)簽, 里面可以添加任意標(biāo)簽

• 定義列表非常靈活, 可以給一個(gè)dt配置多個(gè)dd, 但是最好不要出現(xiàn)多個(gè)dt對(duì)應(yīng)一個(gè)dd, dd的語(yǔ)義是描述離它最近的一個(gè)dt, 所以其它dt相當(dāng)于沒(méi)有描述, 而定義列表存在的意義就是既可以列出每一個(gè)條目又可以對(duì)每一個(gè)條目進(jìn)行描述

• 定義列表非常靈活, 可以將多個(gè)dt+dd組合拆分為多個(gè)dl