HTML先修班：第五課

網路○泡泡○新聞 Internet Pop-up News：網站建置：HTML先修班：第五課

○HTML先修班：第五課○

課程內容：

列表標籤─歸納知識成為列表
序列列表標籤─數目序列列表
非序列列表標籤─子彈型列表
定義列表標籤─字彙定義列表
家庭作業

一. 列表標籤 (Lists)

網路上使用的列表標籤有三種形式：
*序列標籤 (Ordered Lists)
*非序列列表標籤 (Unordered Lists)
*定義列表標籤 (Definition Lists)

HTML有兩種基本的列表標籤：序列或數目列表標籤，以及非序列或子彈列表標籤。
每種列表標籤各有兩組標籤，即列表型態(type)標籤與列表元素(element)標籤。

*序列列表標籤 (Ordered Lists)
使用OL標籤(結束的/OL標籤是需要的)，建立一組從數目1開始的列表。
使用OI標籤(結束的/OI標籤是不需要的)，建立列表的元素。
例如：

第一項
第二項

HTML的寫法如下：
<ol>
<li>第一項
<li>第二項
</ol>

*非序列列表標籤(Unordered Lists)
使用UL標籤(結束的/UL標籤是需要的)，建立一組非數目順序排列的子彈型列表。
一樣使用LI標籤建立列表的元素。
例如：

第一項
第二項

HTML的寫法如下：
<ul>
<li>第一項
<li>第二項
</ul>

*定義列表標籤(Definition Lists)
定義列表標籤通常會讓內文在字彙下面縮進排列，就像字典條文解釋的型態。
定義列表標籤有三組標籤：
*定義列表型態(definition list)標籤<DL>，結束的/DL標籤是需要的。
*定義列表字彙(definition term)標籤<DT>，結束的/DT標籤是需要的。
*定義列表定義(definition)標籤<DD>，結束的/DD標籤是需要的。
例如：

這是要定義的字彙: 這是字彙的定義內容

HTML的寫法如下：
<dl>
<dt>這是要定義的字彙</dt>
<dd>這是字彙的定義內容</dd>
</dl>

要定義一組列表，首先你必須先決定它是哪一種型態(type)的序列，再使用列表標籤來定義其元素。
<li></li>標籤定義大部分的列表元素。

例一，在序列列表裡使用不同的序列型態

首先使用小寫英文字母的序列型態
再來使用大寫英文字母的序列型態
現在使用小寫羅馬數字的序列型態
現在使用大寫羅馬數字的序列型態
最後使用阿拉伯數字的序列型態

HTML的寫法如下：
<ol>
<li type="a">首先使用小寫英文字母的序列型態</li>
<li type="A">再來使用大寫英文字母的序列型態</li>
<li type="i">現在使用小寫羅馬數字的序列型態</li>
<li type="I">現在使用大寫羅馬數字的序列型態</li>
<li type="1">最後使用阿拉伯數字的序列型態</li>
</ol>

例二，在非序列列表裡使用不同的序列型態

現在使用方形的非序列型態
現在使用圓形的非序列型態
現在使用圓盤形的非序列型態

HTML的寫法如下：
<ul>
<li type="square">現在使用方形的非序列型態</li>
<li type="circle">現在使用圓形的非序列型態</li>
<li type="disc">現在使用圓盤形的非序列型態</li>
</ul>

例三，在序列列表裡使用不同的序列值

這是一號
這是二號
這是三號，跳到五號
這是四號，但自然會變成六號

HTML的寫法如下：
<ol>
<li>這是一號</li>
<li>這是二號</li>
<li value="5">這是三號，跳到五號</li>
<li>這是四號，但自然會變成六號</li>
</ol>

二. 序列列表標籤(Ordered Lists)

序列列表標籤讓你依順序列出列表。
它們通常使用在陳述方法或要訣，有特殊順序在其中。

例一，典型的序列列表

第一條
第二條
第三條

HTML的寫法如下：
<ol>
<li>第一條
<li>第二條
<li>第三條
</ol>

例二，字母排列的序列列表

第一條
第二條
第三條

HTML的寫法如下：
<ol type="A">
<li>第一條
<li>第二條
<li>第三條
</ol>

三. 非序列列表標籤(Unordered Lists)

非序列列表標籤用於展現一組不需要依順序排列列表的元素。
通常會以子彈或其他圖案放在列表元素之前。

例一，標準的子彈型態

子彈一
子彈二

HTML的寫法如下：
<ul>>
<li>子彈一
<li>子彈二
</ul>

例二，方形的子彈型態

子彈一
子彈二

HTML的寫法如下：
<ul type="square">>
<li>子彈一
<li>子彈二
</ul>

例二，圓形的子彈型態

子彈一
子彈二

HTML的寫法如下：
<ul type="circle">>
<li>子彈一
<li>子彈二
</ul>

四. 定義列表標籤(Definition Lists)

定義列表標籤和前兩者列表標籤略有不同。
要建立定義列表標籤，首先要使用<dl></dl>標籤。

例一，標準的定義列表型態

字彙: 定義內容
字彙: 定義內容

HTML的寫法如下：
<dl>
<dt>字彙</dt>
<dd>定義內容</dd>
<dt>字彙</dt>
<dd>定義內容</dd>
</dl>

例二，密合(compact)的定義列表型態

字彙: 定義內容
字彙: 定義內容

HTML的寫法如下：
<dl compact>
<dt>字彙</dt>
<dd>定義內容</dd>
<dt>字彙</dt>
<dd>定義內容</dd>
</dl>

再來，使用<dt></dt>指示你要定義的字彙(字或詞)。
典型的定義字彙通常只有一兩個字，不過你若需要定義長句子也是可以的。

最後，使用<dd></dd>寫下這個字彙的定義。
定義內容的文字會被縮排。

五. 家庭作業

為你的網頁製作一個簡短的字彙辭典。
這字彙辭典可以定義你網頁上的元素，舉些有趣的事實，或只是你網站上相關的事件。

網路○泡泡○新聞 Internet Pop-up News

  首頁

  網路資訊

  網路媒體

  電子商務

  網站建置

  電腦資訊

  學習日誌

  靈力補給站

  新鮮玩意兒

  EMAIL