HTML 4.01 快速導覽 - 清單

HTML 4.01 提供三種清單的結構標籤 (tag) ,無序的項目符號、有序的編號清單與說明清單。

  • 項目符號 - <ul> <li>
  • 編號清單 - <ol> <li>
  • 說明清單 - <dl> <dt> <dd>


另有兩個 <menu> 與 <dir> ,同為項目符號清單,兩者在 HTML 4.01 都被 Deprecated , <dir> 在 HTML 5 被 Obsolete , <menu> 則被賦予新功能。


舉例如下
<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>

<!-- 《程式語言教學誌》的範例程式
     http://pydoing.blogspot.com/
     檔名:listexample11.html
     功能:示範 HTML 4.01 標記語言的使用 
     作者:張凱慶
     時間:西元 2011 年 5 月 -->


利用瀏覽器 (broswer) 開啟,結果如下



第 6 行到第 20 行使用 <ul> 元素 (element)
<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> 元素
<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> 元素
<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 教材
首頁


參考資料

沒有留言: