http://learn.shayhowe.com/html-css/ordered-unordered-definition-lists

LESSON 6 Unordered, Ordered, & Definition Lists

List 在日常生活中非常重要，待辦清單最常使用，再來是方向路線圖有行駛的順序；食譜有成分列表，有料理的優先順序；幾乎所有的事物都有以一定的優先順序。

HTML要使用哪一種最符合語義上的用法要謹慎選擇。

HTML

1. Unordered List

1. 有相關的 list 但沒有順序
2. ul : block level element
3. li : block level element
4. 通常瀏覽器預設有一個 solid dot（實心圓點），可以使用CSS改變

2. Ordered List

1. 有相關且有順序的 list ，最大差別就是每一個 items 的順序是很重要的
2. ol :  block level element
3. 使用數字表示順序，一樣也可使用CSS改變呈現
4. ol 的attributes :

1. ol start : 可以修改開始的數字 (HTML5)
   http://www.w3schools.com/tags/att_ol_start.asp
2. ol reversed : 可以反序 (HTML5) only Chrome and Safari 6
   http://www.w3schools.com/tags/att_ol_reversed.asp
3. li value: 可以改變當下 li 的值
   http://www.w3schools.com/tags/att_li_value.asp
4. ol type : 1,a,A,i,I
   http://www.w3schools.com/tags/att_ol_type.asp

3. Definition List

1. 結構

1. dl : 外層
2. dt : term element 定義
3. dd : description element 描述

2. 有很多 term + description
3. term 必須在 description 之前

4. Nested Lists
   巢狀 list

CSS

1. List Item Stylization

1. list-style-type
   https://developer.mozilla.org/en-US/docs/CSS/list-style-type
   none: no list item

2. 使用圖片當作 list item 的寫法

• list-style-image：原始的用法是這個，但不太建議使用這個
  http://www.w3schools.com/cssref/pr_list-style-image.asp
• 比較好的用法是用 background image + padding 的寫法
  li {
   background: url('tick.png') 0 0 no-repeat;
   list-style: none;
   padding-left: 20px;
  }

3. Using Characters as List Item Elements

• pseudo-element :before 可使用 hex-escaped character encoding 當作 list item element
• :before 要配合 content 這個 property 來使用，也必須加上一個 right margin 來空出圖案跟內容的位置。

4. List Style Position Property : list-style-position
   http://www.w3schools.com/cssref/pr_list-style-position.asp
   看起來最大差別在折行的時候對齊到”點”，還是”文字”

• outside  點在外
• inside  點在內
• inherit

5. Shorthand List Style Property

• 順序：list-style-type,  list-style-position,  list-style-image.

2. Horizontally Displaying List  
   水平的List 呈現方式
   最常拿來設計 Navigation

1. Inline Display List
2. Floating List