一、列表標籤是什麼?
什麼是HTML列表?把內容製成表,以表顯示容器裡面裝載文字或圖表的一種形式,叫做清單。清單最大的特點就是整齊、整潔、有序。
列表標籤的作用:給一堆資料添加列表語義,也就是告訴搜尋引擎/瀏覽器這一堆資料是一個整體。
二、列表標籤分類
HTML 的清單分為有序、無序和定義清單:
(1)有序列表,使用<ol> + <li> 標籤
(2)無序列表,使用<ul> + <li> 標籤
(3)定義列表,使用<dl> + <dt> + <dd> 標籤
1. 無序列表
無序列表是一個項目的列表,此列項目使用粗體圓點(典型的小黑圓圈)進行標記。
無序列表始於<ul> 標籤。每個清單項始於<li>。
<html><body><!--一個無序列表:--><ul><li>咖啡</li><li>牛奶</li><li>綠茶</li><li>可樂< /li><li>優格</li></ul></body></html>
最後呈現的結果如圖:
無序列表需要使用<ul> 和<li> 標籤:
(1)<ul> 是unordered list 的簡稱,表示無序列表。
(2)<ul> 和<ol> 中的<li> 一樣,都表示列表中的每一項。預設情況下,無序列表的每一項都使用●符號表示。
注意:<ul> 一般和<li> 搭配使用,不會單獨出現,而且不建議在<ul> 中直接使用<li> 以外的其他標籤。
2. 有序列表
有序列表也是一列項目,清單項目使用數字來標記。
有序列表始於<ol> 標籤。每個清單項目始於<li> 標籤。
<html><body><!--一個有序列表:--><ol><li>咖啡</li><li>牛奶</li><li>綠茶</li><li>可樂< /li><li>優格</li></ol></body></html>
最後呈現的結果如圖:
有序列表需要使用<ol> 和<li> 標籤:
(1)<ol> 是order list 的簡稱,表示有序列表,它可以為列表的每一項進行編號,預設從數字1 開始。
(3)<li> 是list item 的簡稱,表示列表的每一項,<ol> 中有多少個<li> 就表示有多少條內容。列表項目中可以包含文字、圖片、連結等,甚至可以是另一個列表。
注意:<ol> 一般和<li> 搭配使用,不會單獨出現,而且不建議在<ol> 中直接使用<li> 以外的其他標籤。
3. 定義列表
自訂清單不僅僅是一列項目,而是項目及其註解的組合。
自訂清單以<dl> 標籤開始。每個自訂清單項目以<dt> 開始。每個自訂清單項目的定義以<dd> 開始。
<html><body><!--有序列表:--><dl><dt>咖啡</dt><dd>熱飲</dd><dt>牛奶</dt><dd>冷飲< /dd></dl></body></html>
最後呈現的結果如圖:
定義清單需要使用<dl>、<dt> 和<dd> 標籤:
(1)<dl> 是definition list 的簡稱,表示定義清單。
(2)<dt> 是definition term 的簡稱,表示定義術語,也就是我們所說的標題。
(3)<dd> 是definition description 的簡稱,表示定義描述。
可以認為<dt> 定義了一個概念(術語),<dd> 用來對概念(術語)進行解釋。
注意:<dt> 和<dd> 是同級標籤,它們都是<dl> 的子標籤。一般情況下,每個<dt> 搭配一個<dd>,一個<dl> 可以包含多對<dt> 和<dd>。
總結:列表標籤