3-1 嚙瘠嚙踝蕭 (Lists)

在 HTML 文件中，我們可用下列三種方法來列表：

無序列表（Unordered list）
有序列表（Ordered list）
定義列表（Definition list）
以下我們將用範例來分別說明。
無序列表（Unordered list）是用 <ul> 標籤來達成，例如：
Example（list01.htm）：
上述範例的完整原始檔案如下：
原始檔（list01.htm）：（灰色區域按兩下即可拷貝）
<HTML>
<HEAD>    
	<TITLE> 無序列表：基本格式 </TITLE>
</HEAD>
<BODY>

桔茶材料：
<ul>
<li>桔子34顆
<li>香吉士罐頭少許
<li>檸檬半個
<li>梅子12顆（可放可不放）
</ul>
作法：桔子切半搾汁、檸檬搾汁，加入材料與紅茶包，沖熱水即可。

</BODY>
</HTML>
在上述範例中，每一筆資料之前都有個小黑點，代表每一筆資料的提示符號，我們可以改變 type 的屬性值，來選用不同的提示符號，例如：
Example（list02.htm）：
上述範例的完整原始檔案如下：
原始檔（list02.htm）：（灰色區域按兩下即可拷貝）
<HTML>
<HEAD>    
	<TITLE> 無序列表：改變提示符號 </TITLE>
</HEAD>
<BODY>

<ul type=disc>
<li>由 type=disc （預設值）所產生的列表
</ul>
<ul type=circle>
<li>由 type=circle 所產生的列表
</ul>
<ul type=square>
<li>由 type=square 所產生的列表
</ul>

</BODY>
</HTML>
如果我們在無序列表內再放入無序列表，就會形成巢狀式的無序列表，此時瀏覽器會自動選換提示符號，例如：
Example（list06.htm）：
上述範例的完整原始檔案如下：
原始檔（list06.htm）：（灰色區域按兩下即可拷貝）
<HTML>
<HEAD>    
	<TITLE> 無序列表：多層 </TITLE>
</HEAD>
<BODY>

<ul>
<li>清華大學
	<ul>
	<li>資訊系
		<ul>
		<li>大學部一年級
		<li>大學部二年級
			<ul>
			<li>清班
				<ul>
				<li>男生
				<li>女生
				</ul>
			<li>華班
			</ul>
		<li>大學部三年級
		<li>大學部四年級
		</ul>
	<li>電機系
	</ul>
<li>交通大學
<li>台灣大學
</ul>

</BODY>
</HTML>
至於有順序性的列表或清單，需要添加序號的，我們可以用有序列表 (Ordered List) 來處理，例如：
Example（list03.htm）：
上述範例的完整原始檔案如下：
原始檔（list03.htm）：（灰色區域按兩下即可拷貝）
<HTML>
<HEAD>    
	<TITLE> 有序列表：基本格式 </TITLE>
</HEAD>
<BODY>

冰桔茶作法:
<ol>
<li>桔子4顆(超市有賣的小顆桔子)
<li>切半擠汁到雪克杯中
<li>加入
	<ol type="a">
	<li>柳橙濃縮汁
	<li>百香果濃縮汁
	<li>蜂蜜
	</ol>
<li>加入立頓紅茶包泡的一小杯茶
<li>在酌量加入冰塊雪克好就OK!
</ol>

</BODY>
</HTML>
在上述原始碼中，我們事實上用了兩個有序列表，第一層是用數目字 1、2、3 來編號，第二層則是用英文字母 a、b、c 來編號。數目字是預設的編號方法，若要選用不同的編號方法，只需要在 type 設定不同的屬性值就可以了，可用的 type 屬性值可說明如下：

TYPE="1"：這是預設值，代表用阿拉伯數目（1, 2 ,3 ...）字編號。
TYPE="A"：代表用大寫英文字母（A-Z）來編號。
TYPE="a"：代表用小寫英文字母（a-z）來編號。
TYPE="I"：代表用大寫羅馬數字（I, II, III, ...）來編號。
TYPE="i"：代表用小寫羅馬數字（i, ii, iii, ...）來編號。
此外，TYPE 屬性也可以用在 <li> 標籤，如下：
Example（list04.htm）：
上述範例的完整原始檔案如下：
原始檔（list04.htm）：（灰色區域按兩下即可拷貝）
<HTML>
<HEAD>    
	<TITLE> 有序列表：改變編號方式 </TITLE>
</HEAD>
<BODY>

<ol>
<li type="A">
    設定提示符號為大寫字母
<li type="a">
    順序不變但提示符號變成小寫
<li>沒有設定則回到預設值（即阿拉伯數字）
<li type="1" value="10">
    改變提示符號為數字且數值由10開始
</ol>

</BODY>
</HTML>
在上例中，我們使用了另一個屬性 value 來立即改變某一筆資料的編號。
另一個常用的列表方式，就是定義列表（Definition Lists），其功能就像是在定義一堆特殊名詞，例如：
Example（list05.htm）：
上述範例的完整原始檔案如下：
原始檔（list05.htm）：（灰色區域按兩下即可拷貝）
<HTML>
<HEAD>    
	<TITLE> 定義列表：基本格式 </TITLE>
</HEAD>
<BODY>

明膠的成份分為兩種：
<dl>
<dt>動物膠 (Gelatin)
<dd>由動物骨骼關節以酸萃取之，故酸性頗高，不適合用於紅茶凍。但常用於慕司、起士蛋糕之類。市售有粉狀、片狀。
<dt>海草膠 (Jelly T)
<dd>石花菜 (Agar) 的精煉物，植物性，可用在素食的材料上。適合紅茶、咖啡、水果凍。
</dl>

</BODY>
</HTML>
其中，<dt> 代表「被定義的名詞」（Definition Term），<dd> 代表「說明的文字（Definition Data），這兩者必須成對出現。
以下是試驗區，你可以直接填入 HTML 的內容，按「送出測試」後，即可在新網頁看到呈現的結果。
Example（htmlTestList.htm）：

HTML 簡介與應用