了解HTML列表

前面的話

　　從某種意義上講，不是描述性文本的任何內容都可以認為是列表。人口普查、太陽系、餐館菜單等都可以表示為一個列表或列表的列表。列表分為無序列表、有序列表和定義列表三種

 

無序列表

　　無序列表(unorder list)縮寫為ul，即無數值排序項的集合，且它們在列表中的順序是沒有意義的。通常情況下，無序列表項的頭部可以是幾種形式，如一個點，一個圓形或方形。頭部的風格並不是在頁面的HTML描述定義，但在其相關的CSS可以用list-style-type屬性

【默認樣式】　

//IE7-瀏覽器margin-left: 30pt;
ul{
    margin: 16px 0;
    padding-left: 40px;
    list-style-type: disc;
}

<ul>
    <li>Coffee</li>
    <li>Milk</li>
</ul>

 

有序列表

　　有序列表(order list)簡寫為ol，表示多個有序列表項。通常情況下，有序列表中顯示在項前面的編號(a preceding numbering)，可以是任何形式的，如數字、字母或羅馬數字甚至簡單的點。 在網頁的 HTML 描述中並沒有定義編號的樣式，但可以用相關的CSS定義，使用 list-style-type 屬性

【默認樣式】

//IE7-瀏覽器margin-left: 30pt;
ol{
    margin: 16px 0;
    padding-left: 40px;
    list-style-type: decimal;
}

<ol>
    <li>Coffee</li>
    <li>Milk</li>
</ol>

【屬性】

　　HTML5為ol新增了兩個屬性：reversed和start

　　1、reversed

　　　　降序(IE和safari不支持)

　　2、start

　　　　有序列表的起始項(沒有start屬性的CSS替代方案)

<ol reversed start="2">
  <li>咖啡</li>
  <li>牛奶</li>
  <li>茶</li>
  <li>可樂</li>
  <li>酒</li>    
</ol>

marker

　　marker表示ol或ul中li的列表項標志，雖然list-style樣式只能應用於display的值為list-item的元素，但由於該樣式可繼承，所以竟然將其應用在ol或ul，然后通過繼承，使所有的li都獲取設置的list-style樣式。如果給某一個li設置list-style樣式，將覆蓋其從父級繼承的list-style樣式

list-style(列表項標志復合樣式):list-style-type list-style-image list-style-position

　　1、list-style-type：列表項標志類型

　　2、list-style-image：列表項標志圖像

　　3、list-style-position：列表項標志位置

　　[注意]當list-style-image不為none時，list-style-type值將被覆蓋；通常提供一個作為“后路”的標志類型，應付圖像未能加載的意外情況

　　<演示框>點擊下列相應屬性值可進行演示

　　[注意]IE7-瀏覽器不支持屬性值 "decimal-leading-zero"、"lower-greek"、"lower-latin"、"upper-latin"、"armenian"、"georgian"

 

定義列表

　　定義列表(define list)簡寫是dl，是一個包含術語定義以及描述的列表，通常用於展示詞匯表或者元數據(鍵-值對列表)

　　定義元素(define list title)用於在一個定義列表中聲明一個術語。該元素僅能作為dl的子元素出現。通常在該元素后面會跟着dd元素

　　描述元素(define list describe)用來指明一個描述列表dl元素中一個術語的描述。這個元素只能作為描述列表元素的子元素出現，並且必須跟着一個dt元素

　　[注意]一個dt可對應多個dd；<dl><dt><dd>的display都是block

【默認樣式】

dl{
    margin: 16px 0;
}
//IE7-瀏覽器margin-left: 30pt;    
dd{
    margin-left: 40px;
}

<dl>
    <dt>Coffee</dt>
    <dd>Black hot drink</dd>
    <dt>Milk</dt>
    <dd>White cold drink</dd>
</dl>