5-1条列式列表.ppt

第 5 章 讓文字有條 不紊的列表 本章提要 5-1 條列式列表 5-2 定義用列表－dl 5-3 巢狀列表 前言 列表 (List) 是一種簡單且實用的資料排列方式, 一堆資料若以適當的列表顯示, 讀者閱讀時會更輕鬆悅目。HTML 語法提供了數種製作列表的標籤, 本章將分別介紹這些列表標籤。 5-1 條列式列表 條列式列表的的特徵就是要一列、一列地依序列出所需要的項目(item)。在編輯文件時, 我們也是直接在文件中列出所有的項目,其格式大致如下： 5-1 條列式列表 列表標籤有dir、menu、ul 與 ol 4種, 而項目標籤一律使用li。 5-1-1 目錄列表－dir 5-1-2 菜單列表－menu 5-1-3 無序號列表－ul 5-1-4 有序號列表－ol 5-1-1 目錄列表－dir 雖然名為目錄列表 (Directory List), 不過和磁碟上的目錄沒什麼關係, 使用時只要將要列出的項目套入 dir 標籤之間即可： 5-1-1 目錄列表－dir 使用 li 標籤列出項目時, 可以使用成對的 li、/li 標籤包含項目, 也可以單獨使用 li 標籤列出項目。我們來看以下的例子： 5-1-1 目錄列表－dir 由上例可以發現, 使用成對的 li、\li 標籤, 和單獨使用 li 標籤的效果並沒有差別, 並且都各佔用一行, 而不用另外加上 br 標籤做換行的動作。此外, 列表中所有的項目都可以和 b、i等文字效果標籤合併使用。同樣的情形也適用於其它的列表。 5-1-2 菜單列表－menu 菜單列表 (menw list) 使用的標籤是 menu, 其用法和 dir 相同, 只要將 menu 標籤加到列表項目的前後即可, 我們來看看這種菜單列表 (menu list) 的使用情形： 5-1-2 菜單列表－menu 看了上面例子, 您應該發現 menu 標籤和 dir 標籤的效果並無二致。其實 menu和 dir 標籤不論在用法、效果都是一樣的。 之所以會區分為 2 個標籤, 其實是過去瀏覽器在爭取市佔率 (主要是 IE 與 Netscape 瀏覽器) 時, 各自發展了獨有的標籤, 因此造成了 2 個不同名稱的標籤, 但實際功能及用法卻相同的特殊狀況。 5-1-2 菜單列表－menu 其實 dir 及 menu 標籤雖然簡單好用, 但並非 W3C 所認定的標準 HTML 標籤。在 HTML 4.0 規格中雖然仍列出這兩個標籤, 但已將之列為 Deprecated (建議勿用), 意指不希望大家繼續使用, 並建議改用ul 標籤。 5-1-3 無序號列表－ul 無序號列表 (Unordered List), 和文書編輯程式中常用的項目符號雷同, 其用法及效果與前文介紹的 dir、menu 標籤相當類似。ul 標籤不僅是 W3C 認定的標準 HTML 標籤, 而且比 dir、menu 標籤有更多的變化效果。我們來看看以下的例子： 5-1-3 無序號列表－ul 由上例可知, ul 標籤的基本用法和 dir、menu 標籤相同, 即使原本已習慣使用dir 或 menu 標籤, 要改用 ul 標籤也不會有什麼困難。 改變項目符號的樣式－ul type 當我們使用 ul 標籤, 其預設的符號是實心的圓點 ( ● )。除了圓點之外, 我們仍可用ul 標籤的 type 屬性指定其他符號。type 屬性可以指定的符號如下： 改變項目符號的樣式－ul type 樣式的屬性除了可用於 ul 標籤外, 也可用於 li 標籤中, 此時只有該項目會用新指定的 type, 後面的項目仍沿用原來的 ul type 的設定。 改變項目符號的樣式－ul type 5-1-4 有序號列表－ol 相對於無序號列表, 當然有另一種有序號列表 (Ordered List), 標籤為 ol。有序號列表會為 ol 與 /ol 標籤間的項目依序加上編號 ol 標籤的其用法與 ul 相同, 差別在於顯示時則會以項目編號代替項目符號。例如： 5-1-4 有序號列表－ol 我們可以看到使用 ol 標籤時, 每個項目的前面, 都自動加上了 1, 2, 3 的編號。這種方式在項目多的時候, 更能表現出它的好處。 改變項目編號的樣式－ol type 如果只能用 1, 2, 3 等數字做編號, 不僅太單調, 功能也有些不足,其實我們可以在ol 標籤中加上 type 屬性來設定編號的樣式。下表列出可供設定的屬性值與說明： 改變項目編號的樣式－ol type 當然, 這些 type 屬性也可以加在 li 標籤中, 使每個項目有不同的變化, 但編號的次序則不會重新計數。以下面的例子來說, 雖然可以做到在同一個列表中有不同的編號樣式, 卻顯得有點不倫不類：