CSS之列表標籤

1 無序列表

無序列表，用來表示一個列表的語義，並且每個專案和每個專案之間，是不分先後的。

ul就是英語unordered list，“無序列表”的意思。

li 就是英語list item ， “列表項”的意思。

1 <ul>

2 <li>北京</li>

3 <li>上海</li>

4 <li>廣州</li>

5 <li>鐵嶺</li>

6 </ul>

也就是說，所以的li不能單獨存在，必須包裹在ul裡面；反過來說，ul的“兒子”不能是別的東西，只能有li。

下面的是錯誤的，因為必須用ul包裹：

7 <li>北京</li>

8 <li>上海</li>

9 <li>廣州</li>

10 <li>鐵嶺</li>

下面的也是錯誤的，因為ul裡面只能有li標籤，而不能有別的：

1 <ul>

2 <h3>中國主要城市</h3>

3 <li>北京</li>

4 <li>上海</li>

5 <li>廣州</li>

6 <li>鐵嶺</li>

7 </ul>

瀏覽器會預設的給無序列表小圓點的“先導符號”

但是，再次強調，ul的作用，並不是給文字增加小圓點的，而是增加無序列表的“語義”的。

ul標籤實際應用場景：

ul的兒子，只能是li。但是li是一個容器級標籤，li裡面什麼都能放，比如：

1 <ul>

2 <li>

3 <h4>談治國理政</h4>

4 <p>¥49.00</p>

5 <p>《談治國理政》談中國、論世界，為各國讀者開啟了一扇觀察和感知中國的視窗。閱讀這本書，可以瞭解以123同志為總書記的黨中央治國理念和執政方略，品味悠長醇厚的中國歷史文化，感受當</p>

6 </li>

7 <li>

8 <h4>用典</h4>

9 <p>¥23.60</p>

10 <p>人民日報社社長楊振武主持編寫並作序，人民日報社副總編輯盧新寧組織撰寫解讀文字，旨在對總書記重要講話（文章）引用典故的現實意義進行解讀，對典故的背景義</p>

11 </li>

12 <li>

13 <h4>擺脫貧困</h4>

14 <p>26.00</p>

15 <p>追本溯源融會貫通深入學習貫徹總書記系列重要講話精神推動學習貫徹向廣度深度擴充總書記**部個人專著時隔22年後重印發行</p>

16 </li>

17 </ul>

甚至於可以再放一個ul：

1 <ul>

2 <li>

3 吃的

18 <ul>

19 <li>餅乾</li>

20 <li>麵包</li>

21 <li>

22 巧克力

23 <ul>

24 <li>德芙</li>

25 <li>費列羅</li>

26 </ul>

27 </li>

28 </ul>

4 </li>

5 <li>

6 用的

7 <ul>

8 <li>筆記本</li>

9 <li>圓珠筆</li>

10 </ul>

11 </li>

12 <li>

13 喝的

14 <ul>

15 <li>牛奶</li>

16 <li>可樂</li>

17 </ul>

18 </li>

19 </ul>

2 有序列表

ordered list 有序列表，用ol表示

1 <ol>

2 <li>小蘋果</li>

3 <li>月亮之上</li>

4 <li>最炫民族風</li>

5 </ol>

瀏覽器會自動增加阿拉伯序號：

也就是說，ol和ul就是語義不一樣，怎麼使用都是一樣的。

ol裡面只能有li，li必須被ol包裹。li是容器級。

ol這個東西用的不多，如果想表達順序，大家一般也用ul：

1 <ul>

2 <li>1. 小蘋果</li>

3 <li>2. 月亮之上</li>

4 <li>3. 最炫民族風</li>

5 </ul>

3 定義列表

定義列表也是一個組標籤，不過比較複雜，出現了三個標籤：

dl表示definition list 　　　　　　　　　　定義列表

dt表示definition title 　　　　　　　　定義標題

dd表示definition description 　　　　　　定義表述詞兒

dt、dd只能在dl裡面；dl裡面只能有dt、dd

1 <dl>

2 <dt>北京</dt>

3 <dd>國家首都，政治文化中心</dd>

4 <dt>上海</dt>

5 <dd>魔都，有外灘、東方明珠塔、黃浦江</dd>

6 <dt>廣州</dt>

7 <dd>中國南大門，有珠江、小蠻腰</dd>

8 </dl>

表達的語義是兩層：

1) 是一個列表，列出了北京、上海、廣州三個專案

2）每一個詞兒都有自己的描述項。

dd是描述dt的。

定義列表用法非常靈活，可以一個dt配很多dd：

1 <dl>

2 <dt>北京</dt>

3 <dd>國家首都，政治文化中心</dd>

4 <dd>汙染很嚴重，PM2.0天天報表</dd>

5 <dt>上海</dt>

6 <dd>魔都，有外灘、東方明珠塔、黃浦江</dd>

7 <dt>廣州</dt>

8 <dd>中國南大門，有珠江、小蠻腰</dd>

9 </dl>

北京這個專案，用了兩個dd來描述。

還可以拆開，讓每一個dl裡面只有一個dt和dd，這樣子感覺清晰一些。

1 <dl>

2 <dt>北京</dt>

3 <dd>國家首都，政治文化中心</dd>

4 <dd>汙染很嚴重，PM2.0天天報表</dd>

5 </dl>

6

7 <dl>

8 <dt>上海</dt>

9 <dd>魔都，有外灘、東方明珠塔、黃浦江</dd>

10 </dl>

11

12 <dl>

13 <dt>廣州</dt>

14 <dd>中國南大門，有珠江、小蠻腰</dd>

15 </dl>

真實案例：

結構：

1 <dl>

2 <dt>購物指南</dt>

3 <dd>

4 <a href=”#”>購物流程</a>

5 <a href=”#”>會員介紹</a>

6 <a href=”#”>生活旅行/團購</a>

7 <a href=”#”>常見問題</a>

8 <a href=”#”>大家電</a>

9 <a href=”#”>聯絡客服</a>

10 </dd>

11 </dl>

12 <dl>

13 <dt>配送方式</dt>

14 <dd>

15 <a href=”#”>上門自提</a>

16 <a href=”#”>211限時達</a>

17 <a href=”#”>配送服務查詢</a>

18 <a href=”#”>配送費收取標準</a>

19 <a href=”#”>海外配送</a>

20 </dd>

21 </dl>

CSS之列表標籤

1 無序列表

2 有序列表

3 定義列表

相關文章