好孩子的網頁設計
第六課: XHTML List Module
Jedi
Jedi
2006
text/html
TITLE::好孩子的網頁設計,第六課
[[IMG src="../image/20060705.png" width="464" height="464"]]
----
清單
----
HEADER::清單
三種
----
排序清單
----
無序清單
----
定義清單
----
HEADER::
1. ooo
2. xxx
3. oxo
4. xox
----
排序清單
([[EM:o]]rdered [[EM:l]]ist)
----
HEADER::排序清單
[[EM:<ol>]]
----
HEADER::
清單項目
([[EM:li]]st item)
----
HEADER::清單項目
[[EM:<li>]]
----
ALIGN::LEFT
HEADER::排序清單
<ol>
<li>項目一</li>
<li>項目二</li>
<li>項目三</li>
</ol>
----
<ol> 裡面
祇能有 <li>
----
HEADER::
‧ ooo
‧ xxx
‧ oxo
‧ xox
----
無序清單
([[EM:u]]nordered [[EM:l]]ist)
----
HEADER::無序清單
[[EM:<ul>]]
----
ALIGN::LEFT
HEADER::無序清單
<ul>
<li>項目</li>
<li>項目</li>
<li>項目</li>
</ul>
----
<ul> 裡面
祇能有 <li>
----
<li> 一定要在
<ol> 或 <ul> 內
----
HEADER::
定義清單
([[EM:d]]efinition [[EM:l]]ist)
----
HEADER::定義清單
[[EM:<dl>]]
----
定義名詞
([[EM:d]]efinition [[EM:t]]erm)
----
HEADER::定義名詞
[[EM:<dt>]]
----
HEADER::定義清單
定義項目詳細解說
([[EM:d]]efinition [[EM:d]]scription)
----
HEADER::定義項目詳細解說
[[EM:<dd>]]
----
ALIGN::LEFT
HEADER::定義清單
<dl>
<dt>名詞一</dt>
<dd>名詞一的詳細解釋</dd>
<dt>名詞二</dt>
<dd>名詞二的詳細解釋</dd>
</dl>
----
<dl> 裡面
祇能有
<dt> 和 <dd>
----
<dt> 和 <dd>
一定要在
<dl> 裡面
----
HEADER::
多層清單
----
HEADER::多層清單
ALIGN::LEFT
1. ooo
2. xxx
‧ oxo
‧ xox
1. xoo
2. oxx
‧ xxo
3. oox
----
ALIGN::LEFT
<ol>
<li>ooo</li>
<li>xxx
<ul>
<li>oxo</li>
<li>xox
<ol>
<li>xoo</li>
<li>oxx</li>
</ol>
</li>
</ul>
</li>
<li>oox</li>
</ol>
----
ALIGN::LEFT
[[EM:<ol>]]
<li>ooo</li>
[[EM:<li>]]xxx
[[EM:<ul>]]
<li>oxo</li>
<li>xox
<ol>
<li>xoo</li>
<li>oxx</li>
</ol>
</li>
[[EM:</ul>]]
[[EM:</li>]]
<li>oox</li>
[[EM:</ol>]]
----
ALIGN::LEFT
<ol>
<li>ooo</li>
<li>xxx
[[EM:<ul>]]
<li>oxo</li>
[[EM:<li>]]xox
[[EM:<ol>]]
<li>xoo</li>
<li>oxx</li>
[[EM:</ol>]]
[[EM:</li>]]
[[EM:</ul>]]
</li>
<li>oox</li>
</ol>
----
HEADER::
清單與段落
----
HEADER::清單與段落
<ol>, <ul> 和 <dl>
不可以在 <p> 裡面
----
ALIGN::LEFT
<p>
……
</p>
<ul>
<li>項目</li>
<li>項目</li>
<li>項目</li>
</ul>
<p>
……
</p>
----
HEADER::
作業
----
HEADER::作業
上週作業
----
再添細節
----
擇一類清單
----
HEADER::
預告
----
HEADER::預告
(資料)表格