HTML之列表

藍青兒發表於2018-11-05
HTML

列表有三種型別：

有序列表：列表項使用數字來標記

無序列表：列表項使用粗體圓點（典型的小黑圓圈）進行標記。

自定義列表：自定義列表以 <dl> 標籤開始。每個自定義列表項以 <dt> 開始。每個自定義列表項的定義以 <dd> 開始。

一、有序列表格式：

<ol>
      <li>第一個列表項</li>
      <li>第二個列表項</li>
      <li>第三個列表項</li>
</ol>

執行結果：

  1. 第一個列表項
  2. 第二個列表項
  3. 第三個列表項

不同型別的有序列表：

1.編號列表：

<ol>
   <li>第一列表項</li>
   <li>第二列表項</li>
   <li>第三列表項</li>
   <li>第四列表項</li>
</ol>
<ol start="50">
   <li>第五十列表項</li>
   <li>第五十一列表項</li>
   <li>第五十二列表項</li>
   <li>第五十三列表項</li>
</ol>

執行結果：

  1. 第一列表項
  2. 第二列表項
  3. 第三列表項
  4. 第四列表項
  1. 第五十列表項
  2. 第五十一列表項
  3. 第五十二列表項
  4. 第五十三列表項

2.字母列表：

<ol type="A">
   <li>第A列表項</li>
   <li>第B列表項</li>
   <li>第C列表項</li>
   <li>第D列表項</li>
</ol>
 <ol type="a">
    <li>第a列表項</li>
    <li>第b列表項</li>
    <li>第c列表項</li>
    <li>第d列表項</li>
 </ol>

執行結果：

  1. 第A列表項
  2. 第B列表項
  3. 第C列表項
  4. 第D列表項
  1. 第a列表項
  2. 第b列表項
  3. 第c列表項
  4. 第d列表項

3.羅馬數字列表：

<ol type="I">
 <li>Apples</li>
 <li>Bananas</li>
 <li>Lemons</li>
 <li>Oranges</li>
</ol>  
 <ol type="i">
  <li>Apples</li>
  <li>Bananas</li>
  <li>Lemons</li>
  <li>Oranges</li>
 </ol>

執行結果：

  1. Apples
  2. Bananas
  3. Lemons
  4. Oranges
  1. Apples
  2. Bananas
  3. Lemons
  4. Oranges

二、無序列表格式：

<ul>
  <li>無序列表項1</li>
  <li>無序列表項2</li>
  <li>無序列表項3</li>
  <li>無序列表項4</li>
</ul>

執行結果：

  • 無序列表項1
  • 無序列表項2
  • 無序列表項3
  • 無序列表項4

不同型別的無序列表：

1.圓點列表：

<ul style="list-style-type:disc">
  <li>無序列表項1</li>
  <li>無序列表項2</li>
  <li>無序列表項3</li>
  <li>無序列表項4</li>
</ul>

執行結果：

  • 無序列表項1
  • 無序列表項2
  • 無序列表項3
  • 無序列表項4

2.圓圈列表：

<ul style="list-style-type:circle">
  <li>無序列表項1</li>
  <li>無序列表項2</li>
  <li>無序列表項3</li>
  <li>無序列表項4</li>
</ul>

執行結果：圓點變成圓圈

  ◦無序列表項1

  ◦無序列表項2

  ◦無序列表項3

  ◦無序列表項4

 

3.正方形列表：

<ul style="list-style-type:square">
  <li>無序列表項1</li>
  <li>無序列表項2</li>
  <li>無序列表項3</li>
  <li>無序列表項4</li>
</ul>

執行結果：圓點變成方形

  ◾無序列表項1

  ◾無序列表項2

  ◾無序列表項3

  ◾無序列表項4

 

三、自定義列表：

<dl>
  <dt>Coffee</dt>
  <dd>- black hot drink</dd>
  <dt>Milk</dt>
  <dd>- white cold drink</dd>
</dl>

執行結果：

Coffee
- black hot drink
Milk
- white cold drink

四、巢狀列表：

<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

 

相關文章