- 項目符號 - <ul> <li>
- 編號清單 - <ol> <li>
- 說明清單 - <dl> <dt> <dd>
另有兩個 <menu> 與 <dir> ，同為項目符號清單，兩者在 HTML 4.01 都被 Deprecated ， <dir> 在 HTML 5 被 Obsolete ， <menu> 則被賦予新功能。
舉例如下
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 | <html><head><title>網頁標題</title></head><body><ul> <li>項目1</li> <li>項目2</li> <ul> <li>第二層項目1</li> <li>第二層項目2</li> <ul> <li>第三層項目1</li> <li>第三層項目2</li> <li>第三層項目3</li> </ul> <li>第二層項目3</li> </ul> <li>項目3</li></ul><ol> <li>編號1</li> <li>編號2</li> <ol> <li>第二層編號1</li> <li>第二層編號2</li> <li>第二層編號3</li> </ol> <li>編號3</li></ol><dl> <dt>說明項目1</dt> <dd>說明項目1的說明內容1</dd> <dd>說明項目1的說明內容2</dd> <dt>說明項目2</dt> <dd>說明項目2的說明內容1</dd> <dd>說明項目2的說明內容2</dd></dl></body></html><!-- 《程式語言教學誌》的範例程式 檔名：listexample11.html 功能：示範 HTML 4.01 標記語言的使用 作者：張凱慶 時間：西元 2011 年 5 月 --> |
利用瀏覽器 (broswer) 開啟，結果如下
第 6 行到第 20 行使用 <ul> 元素 (element)
6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <ul> <li>項目1</li> <li>項目2</li> <ul> <li>第二層項目1</li> <li>第二層項目2</li> <ul> <li>第三層項目1</li> <li>第三層項目2</li> <li>第三層項目3</li> </ul> <li>第二層項目3</li> </ul> <li>項目3</li></ul> |
<ul> 與 </ul> 之間，每一對 <li> 、 </li> 圍起來的內容都是符號項目內容，項目清單也可以是巢狀的，這是說項目清單中可以有其他的項目清單，如上例有第二層與第三層，預設第一層的符號為實心圓形，第二層為空心圓心，第三層為空心方形。
第 21 行到第 30 行使用 <ol> 元素
21 22 23 24 25 26 27 28 29 30 | <ol> <li>編號1</li> <li>編號2</li> <ol> <li>第二層編號1</li> <li>第二層編號2</li> <li>第二層編號3</li> </ol> <li>編號3</li></ol> |
同樣的， <ol> 與 </ol> 之間，每一對 <li> 、 </li> 圍起來的內容都是編號內容，編號清單也可以是巢狀的，這是說編號清單中可以有其他的編號清單，如上例有第二層，預設每一層都是阿拉伯數字。
第 31 行到第 38 行使用 <dl> 元素
31 32 33 34 35 36 37 38 | <dl> <dt>說明項目1</dt> <dd>說明項目1的說明內容1</dd> <dd>說明項目1的說明內容2</dd> <dt>說明項目2</dt> <dd>說明項目2的說明內容1</dd> <dd>說明項目2的說明內容2</dd></dl> |
<dl> 就稍有不同了， <dt> 與 </dt> 圍起來的內容為說明項目，而 <dd> 與 </dd> 圍起來的則是說明內容。
三者的預設樣式也有不同，大體上 <ul> 與 <ol> 有縮排，巢狀內容會再縮排， <dl> 的 <dt> 沒有縮排， <dd> 才有縮排。
| 中英文術語對照 | |
|---|---|
| 標籤 | tag |
| 瀏覽器 | broswer |
| 元素 | element |
您可以繼續參考
相關目錄
HTML 4.01 快速導覽 - 目錄
HTML, CSS 教材
首頁
參考資料
沒有留言:
張貼留言