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 教材
首頁


參考資料

標籤： ,

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)