著作權所有 © 旗標出版股份有限公司 第 5 章 讓文字有條 不紊的列表

2 本章提要  5-1 條列式列表 5-1 條列式列表  5-2 定義用列表－ 5-2 定義用列表－  5-3 巢狀列表 5-3 巢狀列表

3 前言  列表 (List) 是一種簡單且實用的資料排列 方式, 一堆資料若以適當的列表顯示, 讀者 閱讀時會更輕鬆悅目。 HTML 語法提供了 數種製作列表的標籤, 本章將分別介紹這些 列表標籤。

4 5-1 條列式列表  條列式列表的的特徵就是要一列、一列地 依序列出所需要的項目 (item) 。在編輯文 件時, 我們也是直接在文件中列出所有的項 目, 其格式大致如下：

5 5-1 條列式列表 列表標籤有 、 、 與 4 種, 而項目標籤一律使用 。  目錄列表－  菜單列表－  無序號列表－  有序號列表－

目錄列表－  雖然名為目錄列表 (Directory List), 不過 和磁碟上的目錄沒什麼關係, 使用時只要將 要列出的項目套入 標籤之間即可：

目錄列表－  使用 標籤列出項目時, 可以使用成對 的 、 標籤包含項目, 也可以單 獨使用 標籤列出項目。我們來看以下 的例子：

目錄列表－  由上例可以發現, 使用成對的 、 標籤, 和單獨使用 標籤的效果並沒有 差別, 並且都各佔用一行, 而不用另外加上 標籤做換行的動作。此外, 列表中所 有的項目都可以和 、 等文字效果 標籤合併使用。同樣的情形也適用於其它 的列表。

菜單列表－  菜單列表 (menw list) 使用的標籤是, 其用法和 相同, 只要將 標籤加到列表項目的前後即可, 我們來看看這種菜單列表 (menu list) 的 使用情形：

菜單列表－  看了上面例子, 您應該發現 標籤 和 標籤的效果並無二致。其實 和 標籤不論在用法、效 果都是一樣的。  之所以會區分為 2 個標籤, 其實是過去瀏 覽器在爭取市佔率 ( 主要是 IE 與 Netscape 瀏覽器 ) 時, 各自發展了獨有的 標籤, 因此造成了 2 個不同名稱的標籤, 但 實際功能及用法卻相同的特殊狀況。

菜單列表－  其實 及 標籤雖然簡單好 用, 但並非 W3C 所認定的標準 HTML 標 籤。在 HTML 4.0 規格中雖然仍列出這兩 個標籤, 但已將之列為 Deprecated ( 建 議勿用 ), 意指不希望大家繼續使用, 並建議 改用 標籤。

無序號列表－  無序號列表 (Unordered List), 和文書編 輯程式中常用的項目符號雷同, 其用法及效 果與前文介紹的 、 標籤 相當類似。 標籤不僅是 W3C 認定的 標準 HTML 標籤, 而且比 、 標籤有更多的變化效果。我們來 看看以下的例子：

無序號列表－  由上例可知, 標籤的基本用法和 、 標籤相同, 即使原本已 習慣使用 或 標籤, 要改 用 標籤也不會有什麼困難。

14 改變項目符號的樣式－  當我們使用 標籤, 其預設的符號是 實心的圓點 ( ● ) 。除了圓點之外, 我們仍 可用 標籤的 type 屬性指定其他符號。 type 屬性可以指定的符號如下：

15 改變項目符號的樣式－  樣式的屬性除了可用於 標籤外, 也 可用於 標籤中, 此時只有該項目會用 新指定的 type, 後面的項目仍沿用原來的 的設定。

16 改變項目符號的樣式－

有序號列表－  相對於無序號列表, 當然有另一種有序號列 表 (Ordered List), 標籤為 。有序 號列表會為 與 標籤間的項目 依序加上編號 標籤的其用法與 相同, 差別在於顯示時則會以項目編 號代替項目符號。例如：

有序號列表－  我們可以看到使用 標籤時, 每個項目 的前面, 都自動加上了 1, 2, 3 的編號。這 種方式在項目多的時候, 更能表現出它的好 處。

19 改變項目編號的樣式－  如果只能用 1, 2, 3 等數字做編號, 不僅太 單調, 功能也有些不足, 其實我們可以在 標籤中加上 type 屬性來設定編號的 樣式。下表列出可供設定的屬性值與說明：

20 改變項目編號的樣式－  當然, 這些 type 屬性也可以加在 標 籤中, 使每個項目有不同的變化, 但編號的 次序則不會重新計數。以下面的例子來說, 雖然可以做到在同一個列表中有不同的編號 樣式, 卻顯得有點不倫不類：

21 改變項目編號的樣式－  如上圖所示, 第 3 項的編號樣式變更後, 其 排列次序仍會沿用。不過一般情況下最好 少用這種設定方式, 因為不一致的編號不僅 不美觀, 更可能讓網頁瀏覽者誤以為是編輯 錯誤, 反而貽笑大方。

22 改變編號的起始值與指定編號 －  如果希望編號不是從 1 、 A 、 I 等第一項開始, 可以用 標籤的 start 屬性指定起始的 編號。另外還可在 標籤中加上 value 屬性指定此項的編號, 而該項目後面的項目 也都會跟著新的編號遞增。例如：

23 改變編號的起始值與指定編號 － 設定重 9 開始編號 重新從 3 開始編起

定義用列表－  定義用列表的標籤通常是用於解釋名詞, 因 此首先會列出名詞, 並在名詞之後加入其定 義或說明, 所以稱之為定義用列表：

定義用列表－  定義列表的標籤為 、, 其用 法與 等條列式 列表標籤略有不同。 因為在列表中除了各 項目 ( 名詞 ) 的列表外, 各項目之下都有自己 的項目說明 ( 名詞解 釋 ), 其格式如右：

定義用列表－  各列表項目仍是依預設的方式靠左對齊, 而 定義的部分則會換行顯示, 且其文字會內縮, 至於內縮的程度則依不同瀏覽器而不同。 例如下面這個例子：

定義用列表－

定義用列表－

定義用列表－  標籤會自動換行, 也就是項目和項 目定義會分開在兩行, 讓整段文字結構分明, 更容易閱讀。假使其中某個項目不需項目 定義, 則可以不必加入 標籤。若是 標籤後留下空白不寫, 則 標 籤則會被直接省略掉, 也就等於沒有使用 標籤了。

巢狀列表  前述的列表標籤還可以建立巢狀的列表, 也 就是列表中還有列表, 其呈現的結果有點像 樹狀目錄一樣, 一層一層的。我們來看下列 的範例：

巢狀列表

巢狀列表  使用巢狀列表時, 瀏覽器會自動將下一層的 列表向內縮, 做出較具層次感的效果, 不要 誤以為是在編輯文件時將各項目內縮, 才有 如上例的顯示效果。

巢狀列表  原始文件中的空白對瀏覽器並沒有作用, 我 們編輯時這樣做的目的是為了方便閱讀。  另外, 您是否注意到之前介紹 標籤 時, 預設使用的項目符號是實心圓點 ( ● ), 但此例我們將它做為第二層的列表時, 就如 上圖所示, 項目符號都變成空心圓點 ( ) 。 當 出現在第三層或更下層的時候, 就 會用實心方塊來顯示了。