學習筆記:HTML列表

HTML支持有序、無序和自定義列表

有序列表:

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

無序列表:

  • 列表項
  • 列表項
  • 列表項

1、無序列表

無序列表是一個項目的列表,此列項目使用粗體圓點(典型的小黑圓圈)進行標記。

標籤:<ul>

<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>

瀏覽器顯示如下 

2、有序列表

有序列表也是一列項目,用數字進行標記,這個好像在學MarkDown的時候學的

標籤:<ol>

<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>

3、自定義列表

自定義列表不僅僅是一列項目,而是項目及其註釋的組合。

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

<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

 

4、嵌套列表

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鳥教程(runoob.com)</title> 
</head>
<body>

<h4>嵌套列表:</h4>
<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>

</body>
</html>

結果:

列表標籤彙總

標籤 描述
<ol> 定義有序列表
<ul> 定義無序列表
<li> 定義列表項
<dl> 定義列表
<dt> 自定義列表項目
<dd> 定義自定列表項的描述
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章