HTML提供有序、無序、定義式的條列標識記號,也就是清單(List),有下列不同樣式:
Tag |
Description |
<ol>...</ol> |
設定有序排列清單 |
<ul>....</ul> |
設定以實心圓點、實心圓點、實心方塊開頭列清單 |
<li>...</li> |
設定清單內排列細項 |
<dl>...</dl> |
設定特定排列清單 |
<dt>...</dt> |
設定特定排列清單內主標 |
<dd>...</dd> |
設定特定排列清單內細項區段 |
以實心圓點、實心圓點、實心方塊開頭列清單Unordered
List - UL & LI
<ul
type="disc | square | circle">
<li> ... </li>
<li> ... </li>
<li> ... </li>
<ul>
符號種類
語法:(type同時適用於li)
<ul type="disk">實心圓點(內定值)
<ul type="circle">空心圓點
<ul type="square">實心
由 <ul>
(unordered list) 開始及以 </ul> 作完結,把每一清單中項目置於<li></li>
(List Item) 中。
<ul
type="disk">
<li>台北捷運板南線</li>
<li>台北捷運淡水線</li>
<li>台北捷運木柵線</li>
<li>台北捷運新店線</li>
<li>台北捷運中和線</li>
<li>台北捷運內湖線</li>
</ul>
- 台北捷運板南線
- 台北捷運淡水線
- 台北捷運木柵線
- 台北捷運新店線
- 台北捷運中和線
- 台北捷運內湖線
|
<ul
type="circle">
<li>台北捷運板南線</li>
<li>台北捷運淡水線</li>
<li>台北捷運木柵線</li>
<li>台北捷運新店線</li>
<li>台北捷運中和線</li>
<li>台北捷運內湖線</li>
</ul>
- 台北捷運板南線
- 台北捷運淡水線
- 台北捷運木柵線
- 台北捷運新店線
- 台北捷運中和線
- 台北捷運內湖線
|
<ul
type="square">
<li>台北捷運板南線</li>
<li>台北捷運淡水線</li>
<li>台北捷運木柵線</li>
<li>台北捷運新店線</li>
<li>台北捷運中和線</li>
<li>台北捷運內湖線</li>
</ul>
- 台北捷運板南線
- 台北捷運淡水線
- 台北捷運木柵線
- 台北捷運新店線
- 台北捷運中和線
- 台北捷運內湖線
|
利用Type 設定英文字、羅馬數字或阿拉伯數字排序列清單方式Ordered
List - OL & LI
<ol
type="1 | a | A | i | I" start="#">
<li value="#"> ... </li>
<li> ... </li>
<li> ... </li>
<ol>
與前者差不多,但由 <ol>
(Ordered List) 開始及以 </ol> 作完結,把每一清單中項目置於<li></li>
(List Item) 中。
注意 Type 值是有大小寫區分(case-sensitive) 的。
<ol type="1">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
- Apples
- Bananas
- Lemons
- Oranges
|
<ol type="A">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
- Apples
- Bananas
- Lemons
- Oranges
|
<ol type="a">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
- Apples
- Bananas
- Lemons
- Oranges
|
<ol type="I">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
- Apples
- Bananas
- Lemons
- Oranges
|
<ol type="i">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
- Apples
- Bananas
- Lemons
- Oranges
|
使用"dick";"circle";"square"時,要用<UL></UL>
使用"A";"a";"I";"i";"1"時,要用<OL></OL>
特定排列清單Definition List - DL & DT
<DL compact>
<DT>第一項清單</DT>
<DD>第一項清單內的說明文字01</DD>
<DD>第一項清單內的說明文字02</DD>
<DD>第一項清單內的說明文字03</DD>
<DT>第二項清單</DT>
<DD>第二項清單內的說明文字01</DD>
<DD>第二項清單內的說明文字02</DD>
<DD>第二項清單內的說明文字03</DD>
<DD>第二項清單內的說明文字04</DD>
</DL>
特定排列清單由 <dl> (Definition List) 開始及以 </dl>
作完結,<dt></dt> (Definition Term)
及 <dd></dd> (Definition Description)
分別定義每一點的標題及內容。 在特定排列設定標示 <dd>,你可以放進段落、換從、圖片、連結、其它排列等。
<DL compact> <DT><a href="first.html"> 第一項清單</a></DT> <DD>第一項清單內的說明文字01</DD> <DD>第一項清單內的說明文字02</DD> <DD>第一項清單內的說明文字03</DD> <DT><a href="second.html"> 第二項清單 </a></DT> <DD>第二項清單內的說明文字01</DD> <DD>第二項清單內的說明文字02</DD> <DD>第二項清單內的說明文字03</DD> <DD>第二項清單內的說明文字04</DD> </DL>
- 第一項清單
- 第一項清單內的說明文字01
- 第一項清單內的說明文字02
- 第一項清單內的說明文字03
- 第二項清單
- 第二項清單內的說明文字01
- 第二項清單內的說明文字02
- 第二項清單內的說明文字03
- 第二項清單內的說明文字04
清單內的清單(巢狀排列清單):
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea
<ul>
<li>China</li>
<li>Africa</li>
</ul>
</li>
</ul>
</li>
<li>Milk</li>
</ul>
不同的列清單樣式是可混合使用的:
<ol>
<li>Browsers:</li>
<ul type="square">
<dl>
<dt>Microsoft</dt>
<dd>Internet Expoler 6.0</dd>
<dt>Netscape</dt>
<dd>Netscape Communicator</dd>
<dt>Others</dt>
<dd>Fire Fox</dd> <dd>Mxie</dd> </dl>
<li>Microsoft Internet Explorer</li>
<li>Netscape Communicator</li>
</ul>
<li>E-mail Clients:</li>
<ul>
<li>Agent</li>
<li>Eudora</li> <li>Outlook Express</li>
</ul>
</ol>
- Browsers:
- Microsoft
- Internet Expoler 6.0
- Netscape
- Netscape Communicator
- Others
- Fire Fox
- Mxie
- Microsoft Internet Explorer
- Netscape Communicator
- E-mail Clients:
- Agent
- Eudora
- Outlook Express
|