2009年11月1日 星期日

HTML再接再厲(十三)：序列項目

如果你有使用MS WORD的經驗，那裡面有個功能叫做「項目符號及編號」，就是把內容重點式條列出來，然後將每個要點前面編上數字(1,2,3...)或是一些特殊符號。在這兒要介紹的就是網頁中的「項目符號及編號」。

小豆豆

為什麼要在文句前面加上小豆豆呢？原因如下：

  • 容易吸引讀者注意。
  • 看起來很酷，也很專業。
  • 艾爾弗烈德喜歡這樣。

嘻！最後一個理由是我硬湊出來的，為了表現出"三豆"重點("三"代表多數)。其語法如下：

<UL>
<LI>容易吸引讀者注意。
<LI>看起來很酷，也很專業。
<LI>艾爾弗烈德喜歡這樣。
</UL>

在做語法解析的時候，我又要用使用這些小豆豆了：

  • UL　它是Undered List的縮寫，意思是無序條列項目。
  • LI　它是List Item的縮寫，意思是條列項目。它不需要回復旗標</LI>，你就算寫了，瀏覽程式也會當成沒看見而不翻譯執行。
  • /UL　無序條列項目的回復旗標。

注意！<LI>旗標所條列的各個重點項目不會另跳一行(增加一行空白)，你可以在句末加上 <BR>&nbsp; 來強迫跳一行。

無序旗標

你也許會問：「我不喜歡黑黑的小豆豆，我想要一個小方豆干行不行呢？」當然可以啦！我們現在就介紹利用無序旗標的形狀屬性 TYPE="square" 來製作小方豆干：

  • 豆干有豐富蛋白質，為素食上品。
  • 豆干可製成各種形狀，炒、滷、蒸起來都很好吃。
  • 艾爾弗烈德喜歡吃比較硬、帶有咬勁的豆干。

這只是舉例而已，寫網頁和吃零食沒有什麼大關連。其語法如下：

<UL TYPE="square">
<LI>豆干有豐富蛋白質，為素食上品。
<LI>豆干可製成各種形狀，炒、滷、蒸起來都很好吃。
<LI>艾爾弗烈德喜歡吃比較硬、帶有咬勁的豆干。
</UL>

那還有沒有其它形式的小豆豆呢？試試看 TYPE="disk" 和 TYPE="circle" 吧！disk是一個實心圓，circle是一個空心圓。其範例如下：

  • 實心圓不就是預設的形狀嗎？
  • 對啊，你真聰明！
  • 再繼續看下一個範例。
  • 空心圓看起來沒這麼明顯。
  • 對啊，你實在是太聰明了！
  • 所以如果是多層次的無序旗標，它是預設的內層條列項目之形狀。

多層次無序旗標

如果你不指定形狀屬性，而使用了多層次的無序旗標，瀏覽程式會依預設方式顯示這些小豆豆和小豆干，其範例如下：

  • 第一層重點．．．
    • 第二層重點．．．
      • 第三層重點．．．
      • 第三層重點．．．
      • 第三層重點．．．
    • 第二層重點．．．
    • 第二層重點．．．
  • 第一層重點．．．
  • 第一層重點．．．

其語法如下：

<UL>
<LI>第一層重點．．．
　　<UL>
　　<LI>第二層重點．．．
　　　　<UL>
　　　　<LI>第三層重點．．．
　　　　<LI>第三層重點．．．
　　　　<LI>第三層重點．．．
　　　　</UL>
　　<LI>第二層重點．．．
　　<LI>第二層重點．．．
　　</UL>
<LI>第一層重點．．．
<LI>第一層重點．．．
</UL>

註：在舊版的HTML中使用 <MENU> 或 <DIR>，在HTML4.0及以上版本已被 <UL> 取代。

有序旗標

有些網友喜歡將條列項目前面加上代表序列的數字或字母，這也很容易做到。

  1. 明教第一高手張無忌。
  2. 明教左右光明使楊逍和范遙。
  3. 明教四大護法龍、鷹、獅、蝠。

其語法如下：

<OL>
<LI>明教第一高手張無忌。
<LI>明教左右光明使楊逍和范遙。
<LI>明教四大護法龍、鷹、獅、蝠。
</OL>

OL 就是Ordered List的縮寫，意思是有序條列項目。

如果你不喜歡阿拉伯數字，你也可以使用羅馬數字，英文大寫字母或小寫字母。也是利用 TYPE="--" 屬性，其範例和語法如下：

  1. 大寫羅馬數字。
  2. 看起來十分嚴肅。
  3. 拿來標示各項法規好了。

<UL>
<OL TYPE="I">
<LI>大寫羅馬數字。
<LI>看起來十分嚴肅。
<LI>拿來標示各項法規好了。
</OL>

  1. 小寫羅馬數字。
  2. 看起來比較活潑。
  3. 常用在書籍目錄中的前言或附註索引序號。

<UL>
<OL TYPE="i">
<LI>小寫羅馬數字。
<LI>看起來比較活潑，沒有那麼正式。
<LI>常用在書籍目錄中的前言或附註索引序號。
</OL>

  1. 大寫英文字母。
  2. 看起來很整齊。
  3. 你可以試用看看。

<UL>
<OL TYPE="A">
<LI>大寫英文字母。
<LI>看起來很整齊。
<LI>你可以試用看看。
</OL>

  1. 小寫英文字母。
  2. 看起來很輕鬆。
  3. 你也可以試用看看。

<UL>
<OL TYPE="a">
<LI>小寫英文字母。
<LI>看起來很輕鬆。
<LI>你也可以試用看看。
</OL>

如果你不希望每個序列項目都是由1開始，可以使用 START="--" 屬性來設定開始的數字。

  1. 自行設定開始的數字。
  2. 可以應用在羅馬數字。
  3. 也可以應用在英文字母。

<UL>
<OL START="4">
<LI>自行設定開始的數字。
<LI>可以應用在羅馬數字。
<LI>也可以應用在英文字母。
</OL>

混合多層次序列旗標

你可以混合使用多層次的無序或有序旗標，瀏覽程式會依預設方式顯示小豆豆和數字，其範例和語法如下：

  1. 第一層重點．．．
    • 第二層重點．．．
    • 第二層重點．．．
  2. 第一層重點．．．
    • 第二層重點．．．
    • 第二層重點．．．

<OL>
<LI>第一層重點．．．
　　<UL>
　　<LI>第二層重點．．．
　　<LI>第二層重點．．．
　　</UL>
<LI>第一層重點．．．
　　<UL>
　　<LI>第二層重點．．．
　　<LI>第二層重點．．．
　　</UL>
</OL>

定義項目旗標

當你要給條列項目一些說明時，就可以使用定義項目旗標，其範例及語法如下：

今晚的菜單是

沙拉
生菜、紫色洋蔥、義式沙拉醬。
主餐
炭烤豬仔骨或沙朗牛排配上特製醬汁。
附餐
香醇紅茶或咖啡。

<H4>今晚的菜單是</H4>
<DL>
<DT>沙拉
<DD>生菜、紫色洋蔥、義式沙拉醬。
<DT>主餐
<DD>炭烤豬仔骨或沙朗牛排配上特製醬汁。
<DT>附餐
<DD>香醇紅茶或咖啡。
</DL>

語法分析：

  • 我用 <H4> 旗標顯示標題。
  • DL　它是Definition List的縮寫，意思是定義條列項目。
  • DT　它是Definition Term的縮寫，意思是定義條列項目的字辭。
  • DD　它是Definition Description的縮寫，意思是定義條列項目的說明。

我不常使用這個旗標，你可以自行選擇合適的時機使用。

結語

嗯！有關序列項目提得差不多了，你若是記不得繁瑣的 TYPE="--" 和 START="--" 屬性也沒關係，只要會使用基本的無序旗標 <UL> 和有序旗標 <OL> 和條列項目 <LI> 就夠了。

本文配合HTML 4.0撰寫，新版HTML均可向前相容。

文章分類：

0 留言:

張貼留言