HTML/列表

HTML有3種列表。

有序列表

  <ol>
    <li>First item</li>
    <li>Second item</li>
    <li>Third item</li>
  </ol>

結果為：

First item
Second item
Third item

無序號列表

  <ul>
    <li>First item</li>
    <li>Second item</li>
    <li>Third item</li>
  </ul>

結果為：

First item
Second item
Third item

定義列表

  <dl>
    <dt>Term 1</dt>
    <dd>Definition of Term 1</dd>
    <dt>Term 2</dt>
    <dd>Definition of Term 2</dd>
  </dl>

結果為：

Term 1: Definition of Term 1
Term 2: Definition of Term 2

兩項共享同一定義：

  <dl>
    <dt>Cascading Style Sheets</dt>
    <dt>CSS</dt>
    <dd>Definition of Cascading Style Sheets (aka CSS)</dd>
    <dt>Term 2</dt>
    <dd>Definition of Term 2</dd>
  </dl>

結果為：

Cascading Style Sheets
CSS: Definition of Cascading Style Sheets (aka CSS)
Term 2: Definition of Term 2

一項有兩個可選定義，用dd元素分割：

  <dl>
    <dt>Mouse</dt>
    <dd>Small mammal</dd>
    <dd>Input device for a computer</dd>
  </dl>

結果為：

Mouse: Small mammal; Input device for a computer

更長的定義可以用p元素分割dd元素的內容：

  <dl>
    <dt>Term 2</dt>
    <dd>
      <p>First paragraph of the definition.</p>
      <p>Second paragraph of the definition.</p>
    </dd>
  </dl>

結果為:

Term 2

First paragraph of the definition.

Second paragraph of the definition.

嵌套列表

<ul>
  <li>Lists     
    <ul>
      <li>Numbered Lists</li>
      <li>Unnumbered Lists</li>
    </ul>
  </li>
</ul>

結果為:

Lists
- Numbered Lists
- Unnumbered Lists

不正確的嵌套例子:

<ul>
  <li>Lists</li>
  <ul>
    <li>Numbered Lists</li>
    <li>Unnumbered Lists</li>
  </ul>
</ul>

另一個不正確嵌套例子，有兩個相繼的UL元素：

<ul>
   <li>
      Outer list item
      <ul>
        <ul>
          <li>
            Inner list item within two consecutive UL elements
          </li>
        </ul>
      </ul>
   </li>
</ul>

關于格式的註解

上述3種列表是HTML的預設繪製。使用CSS，可以有更多的列表方式，如把垂直列表改為水平列表。

例子

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Pancakes</title>
  </head>
  <body>
    <h1>A Recipe for Pancakes</h1>
    <p>From <a href="http://en.wikibooks.org/wiki/Cookbook:Pancake">Wikibooks Cookbook</a>.</p>
    <p>These pancakes make a good breakfast for a family.
       They go well with real maple syrup.
       They are healthy too (as long as you don't over do the syrup)
       since whole wheat flour contributes to your fiber intake.
    </p>
    <h2>Ingredients</h2>
    <ul>
      <li>1 cup whole wheat flour</li>
      <li>1 tablespoon common granulated sugar</li>
      <li>2 teaspoons baking powder</li>
      <li>1/4 teaspoon salt</li>
      <li>1 egg</li>
      <li>1 cup milk</li>
      <li>2 tablespoons oil</li>
      <li>additional oil for frying</li>
    </ul>
    <h2>Procedure</h2>
    <ol>
      <li>Oil a frying pan.</li>
      <li>Mix the dry ingredients in one bowl.</li>
      <li>In another bowl, scramble the egg, then add the other wet ingredients.
          This includes the 2 tablespoons of oil.</li>
      <li>Mix the dry and wet ingredients together,
          well enough to eliminate dry spots but no more.</li>
      <li>Heat the frying pan to medium temperature.
          The pan is hot enough when a drop of water dances around
          rather than simply boiling away.</li>
      <li>Pour a pancake, about 4 inches in diameter using about a 1/4 cup of batter.</li>
      <li>The pancake will bubble. When the bubbling settles down and
          the edges are slightly dry, flip the pancake.</li>
      <li>When the pancake looks done, remove it and start another one.</li>
    </ol>
    <h2>Toppings</h2>
    <p>Traditionally, pancakes are topped with butter and maple syrup.
       Other toppings can include strawberries, applesauce, cinnamon, or sugar.
    </p>
 </body>
</html>