Computer: Makeuper: HTML: Lists

連結

Computer:Makeuper:HTML

清單

從這裡開始我們只取用範例的一部份繼續增加東西，到最後才貼出完整的範例給大家做比較。這一節我們取出的是：

<h3>基礎 HTML</h3>
<p>以下是基礎的 HTML 標籤：</p>
<h3>進階 HTML</h3>
<p>這裡提供一些進階範例：</p>

基礎和進階 HTML 兩段。我們要在這兩段裡各加入一個清單，其中一個是用項目符號的清單，另一個是用自動編號的清單。

<h3>基礎 HTML</h3>
<p>以下是基礎的 HTML 標籤：</p>
<ul>
  <li>HTML 骨架</li>
  <li>標題</li>
  <li>段落</li>
  <li>清單</li>
  <li>……下略</li>
</ul>
<h3>進階 HTML</h3>
<p>這裡提供一些進階範例：</p>
<ol>
  <li>圖片不同部份變不同連結</li>
  <li>加上 alt 快速鍵</li>
</ol>

眼尖的讀者應該已經注意到了。我們加入的第一組清單用的是 ul 標籤，這是英文「unordered list」的意思，也就是「沒有順序的清單」，沒有順序，就是用項目符號；而第二組 ol 標籤是「ordered list」(有順序的清單)，也就是會自動編號。

清單裡的每一個項目都用 li.../li 包起來，li 就是「list item」(清單項目)。

這樣記起來了嗎？清單就是 list，決定要編號 (ol) 還是不要編號 (ul) 之後，再把每個項目 (li) 包起來。

最後也別忘了對稱的 /ul 或是 /ol，不然會出問題的。

額外小知識

• 清單不可以包在段落裡面！請參考上面的做法，先用 /p 結束段落之後再開始寫清單。這是為了符合 XHTML 1.0 的規定。
• 有時您會看見有些人的清單項目沒有加上 /li 結尾標籤，這是舊式的用法，現在已經逐漸在淘汰了。