HTML（十一）：列表標籤
阿新 • • 發佈：2022-04-07
表格標籤是用來顯示資料的，那麼列表就是用來佈局的。
列表最大的特點就是整齊、整潔、有序，它作為佈局會更加自由和方便。
根據使用情景不同，列表可以分為三大類：無序列表，有序列表和自定義列表。
無序列表
基本語法
<ul>標籤表示HTML頁面中專案的無序列表，一般會議專案符號呈現列表項，而列表項使用<li>標籤定義。
<ul>
<li>列表項1</li>
<li>列表項2</li>
<li>列表項3</li>
。。。
</ul>
-
無序列表的各個列表項之間沒有順序級別之分，是並列的。
-
<ul> </ul>中只能巢狀<li></li>，直接在<ul></ul>標籤中輸入其他標籤或文字的做法是不被允許的。 -
<li>與</li>之間相當於一個容器，可以容納所有元素。 -
無序列表會帶有自己的樣式屬性，但實際使用中，我們會使用CSS來設定。
程式碼示例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>無序列表</title> </head> <body> <ul> <li>榴蓮</li> <li>臭豆腐</li> <li>螺螄粉</li> <li> <p>123</p> </li> </ul> </body> </html>
有序列表
有序列表即為有排列順序的列表，其各個列表項會按照一定的順序排列帶定義。
基本語法
在HTML中，<ol>標籤用於定義有序列表，列表以數字來顯示，並且使用<li>標籤來定義列表項。
<ol>
<li>列表項1</li>
<li>列表項2</li>
<li>列表項3</li>
。。。
</ol>
-
<ol> </ol>中只能巢狀<li></li>，直接在<ul></ul>標籤中輸入其他標籤或文字的做法是不被允許的。 -
<li>與</li>之間相當於一個容器，可以容納所有元素。 -
有序列表會帶有自己的樣式屬性，但實際使用中，我們會使用CSS來設定。
程式碼示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>有序列表</title>
</head>
<body>
<h4>粉絲排行榜</h4>
<ol>
<li>劉德華 10000</li>
<li>劉若英 1000</li>
</ol>
</body>
</html>
自定義列表
自定義列表常用於對術語或名詞進行解釋和描述，定義列表的列表項前乜有任何專案符號。
基本語法
在HTML標籤中，<dl>標籤用於定義描述列表，該標籤會與<dt>（定義專案/名字）和<dd>（描述每一個專案/名字）一起使用。
<dl>
<dt>
<dd>名詞1</dd>
<dd>名詞1解釋1</dd>
<dd>名詞1解釋2</dd>
</dt>
<dt>
<dd>名詞2</dd>
<dd>名詞2解釋1</dd>
<dd>名詞2解釋2</dd>
</dt>
...
</dl>
-
<dl></dl>裡面只能包含<dt>和<dd>。 -
<dt>和<dd>個數沒有限制，經常一個<dt>對應多個<dd>
示例程式碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>自定義列表</title>
</head>
<body>
<dl>
<dt>幫助中心</dt>
<dd>賬戶管理</dd>
<dd>購物指南</dd>
<dd>訂單操作</dd>
</dl>
<dl>
<dt>服務支援</dt>
<dd>售後政策</dd>
<dd>自助服務</dd>
<dd>相關下載</dd>
</dl>
<dl>
<dt>線下門店</dt>
<dd>小米之家</dd>
<dd>服務網點</dd>
<dd>授權體驗店/專區</dd>
</dl>
</body>
</html>