1 / 33

第 5 章

第 5 章. 讓文字有條 不紊的列表. 本章提要. 5-1 條列式列表 5-2 定義用列表－ <dl> 5-3 巢狀列表. 前言. 列表 (List) 是一種簡單且實用的資料排列方式 , 一堆資料若以適當的列表顯示 , 讀者閱讀時會更輕鬆悅目。 HTML 語法提供了數種製作列表的標籤 , 本章將分別介紹這些列表標籤。. 5-1 條列式列表. 條列式列表的的特徵就是要一列、一列地依序列出所需要的項目 (item) 。在編輯文件時 , 我們也是直接在文件中列出所有的項目 , 其格式大致如下：. 5-1 條列式列表.

chill
Download Presentation

第 5 章

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 第 5 章 讓文字有條 不紊的列表

  2. 本章提要 • 5-1 條列式列表 • 5-2 定義用列表－<dl> • 5-3 巢狀列表

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

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

  5. 5-1 條列式列表 列表標籤有<dir>、<menu>、<ul> 與 <ol> 4種, 而項目標籤一律使用<li>。 • 5-1-1 目錄列表－<dir> • 5-1-2 菜單列表－<menu> • 5-1-3 無序號列表－<ul> • 5-1-4 有序號列表－<ol>

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

  7. 5-1-1 目錄列表－<dir> • 使用 <li> 標籤列出項目時, 可以使用成對的 <li>、</li> 標籤包含項目, 也可以單獨使用 <li> 標籤列出項目。我們來看以下的例子：

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

  9. 5-1-2 菜單列表－<menu> • 菜單列表 (menw list) 使用的標籤是 <menu>, 其用法和 <dir> 相同, 只要將 <menu> 標籤加到列表項目的前後即可, 我們來看看這種菜單列表 (menu list) 的使用情形：

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

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

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

  13. 5-1-3 無序號列表－<ul> • 由上例可知, <ul> 標籤的基本用法和 <dir>、<menu> 標籤相同, 即使原本已習慣使用<dir> 或 <menu> 標籤, 要改用 <ul> 標籤也不會有什麼困難。

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

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

  16. 改變項目符號的樣式－<ul type>

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

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

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

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

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

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

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

  24. 5-2 定義用列表－<dl> • 定義用列表的標籤通常是用於解釋名詞, 因此首先會列出名詞, 並在名詞之後加入其定義或說明, 所以稱之為定義用列表：

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

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

  27. 5-2 定義用列表－<dl>

  28. 5-2 定義用列表－<dl>

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

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

  31. 5-3 巢狀列表

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

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

More Related