9 walker studio-9w個人設計工作室
Google
.網頁設計接案業務
.加入GForce手機娛樂聯盟

.基礎HTML教學
.CSS樣式表教學
.基礎JAVASCRIPT教學
.JAVASCRIPT收集
.自製ASP程式下載
.色彩英文名對照
.16進位色碼對照一
.16進位色碼對照二
.可愛包子動畫圖庫
.MSN表情小圖示下載
.9W2U-1024X768桌布下載

.GForce付費手機遊戲
.免費遊戲房
.免費線上遊戲房
.免費檔案報報
.免費資源報報
.網站漫遊報報
.多國語言字母發音表

因網友留言內容
含成人色情內容
討論區即時停止運作
不便之處敬請見諒
● LOGO交換登錄
● 和我們連絡

 友站及其它連結
刑事警察局網際網路資訊站
591租屋網站
反毒害大聯盟
台灣認養地圖
KTzone日記, 論壇
::S.H.E 青春組織國際後援會::
基礎HTML教學
Hyper Markup Language

01 HTML簡介 10 分割畫面(Frameset)
02 HTML文件的基本架構及指令 11 超鏈結(Hyper Link)
03 製作第一份HTML文件 12 拋錨(Anchor)
04 網頁背景(Background) 13 表單(Form)
05 控制標題字元大小及字型指令 14 跑馬燈Internet Exploer專用
06 使用CSS控制字元屬性 15 文字編排
07 表格的運用(Table) 16 Meta 指令運用
08 清單(List) 17 標註指令列表
09 加入圖片
18 其他

08、清單 (List)

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>

Type值
列清單方式
清單表列方式
1
阿拉伯數目字 1, 2, 3, ...
a
小寫字母 a, b, c, ...
A
大寫字母 A, B, C, ...
i
小寫羅馬數目字 i, ii, iii, ...
I
小寫羅馬數目字 I, II, III, ...

與前者差不多,但由 <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>

  1. Apples
  2. Bananas
  3. Lemons
  4. Oranges
<ol type="A">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>

  1. Apples
  2. Bananas
  3. Lemons
  4. Oranges
<ol type="a">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>

  1. Apples
  2. Bananas
  3. Lemons
  4. Oranges
<ol type="I">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>

  1. Apples
  2. Bananas
  3. Lemons
  4. Oranges
<ol type="i">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>

  1. Apples
  2. Bananas
  3. Lemons
  4. 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>

  • Coffee
  • Tea
    • Black tea
    • Green tea
  • Milk
<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>
  • Coffee
  • Tea
    • Black tea
    • Green tea

      • China
      • Africa
  • Milk

不同的列清單樣式是可混合使用的:

<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>
  1. Browsers:
    • Microsoft
      Internet Expoler 6.0
      Netscape
      Netscape Communicator
      Others
      Fire Fox
      Mxie

    • Microsoft Internet Explorer
    • Netscape Communicator
  2. E-mail Clients:


    • Agent
    • Eudora
    • Outlook Express



本站內容屬私人所有 請勿任易轉載 如須轉載 請通知本站
本站所鏈結標題及鍊結內容 皆歸原權利人所有
網站內容如有任何侵權 亦請通知本站刪除 謝謝!

Power by 9 Walker Studio
本站內容屬私人所有 請勿任易轉載 如須轉載請通知本站