整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
TML 支持有序、無序和定義列表:
HTML 列表
有序列表
| 無序列表
|
本例演示無序列表。無序列表
有序列表
本例演示有序列表。
HTML無序列表
無序列表是一個項目的列表，此列項目使用粗體圓點（典型的小黑圓圈）進行標記。
無序列表使用 <ul> 標簽
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
瀏覽器顯示如下：
Coffee
Milk
HTML 有序列表
同樣，有序列表也是一列項目，列表項目使用數字進行標記。 有序列表始于 <ol> 標簽。每個列表項始于 <li> 標簽。
列表項項使用數字來標記。
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>
瀏覽器中顯示如下：
Coffee
Milk
HTML 自定義列表
自定義列表不僅僅是一列項目，而是項目及其注釋的組合。
自定義列表以 <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
注意事項 - 有用提示
提示: 列表項內部可以使用段落、換行符、圖片、鏈接以及其他列表等等。
更多實例
不同類型的有序列表
本例演示不同類型的有序列表。
不同類型的無序列表
本例演示不同類型的無序列表。
嵌套列表
本例演示如何嵌套列表。
嵌套列表 2
本例演示更復雜的嵌套列表。
自定義列表
本例演示一個定義列表。
HTML 列表標簽
| 標簽 | 描述 |
|---|---|
| <ol> | 定義有序列表 |
| <ul> | 定義無序列表 |
| <li> | 定義列表項 |
| <dl> | 定義定義列表 |
| <dt> | 自定義列表項目 |
| <dd> | 定義自定列表項的描述 |
如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！
網絡上，有序列表可以使您的 HTML 頁面更有組織、簡潔且易于閱讀。在本文中，我將向您展示如何在 HTML 中創建高質量、有趣的有序列表。您將學習如何在平凡的列表中帶來鮮為人知的＂Wow＂效果。讓我們開始吧！
HTML 中的有序列表（ordered list）使用 <ol> 元素創建，并且對于每個列表項使用 <li> 元素。下面是一段有序列表的基本示例：
html<ol>
<li>項目 1</li>
<li>項目 2</li>
</ol>
在上面的示例中，您可以看到列表由 <ol> 元素包圍，每個列表項使用 <li> 元素表示。
要讓您的有序列表更具吸引力，您可以通過使用 CSS 進行累積 з?熄culation。以下是一些建議：
css一節我們說了，使用<ol>標簽來定義有序列表，并使用<li>標簽來定義列表項。和無序列表一樣，也是使用<li>標簽來定義列表項。
先看效果:
可以看到，列表項前面有序號標出，1、2、3等，無序的時候前面是 .
接下來看看代碼樣式:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>有序列表</title>
</head>
<body>
<ol>
<li>有序列表項1</li>
<li>有序列表項2</li>
<li>有序列表項3</li>
</ol>
</body>
</html>
可以看到<ol>和<li>的使用，有序列表在實際工作中用的不是很多。
接著說下自定義列表，自定義列表常用于對術語名詞進行解釋和描述，定義列表的列表項前沒有任何項目符號(沒有點和數字)。說下自定義列表的語法
<dl>標簽用于定義描述列表(或定義列表)，該標簽會與<dt> 定義項目和名字，還有<dd> 描述每一個項目和名字，一起使用。
<dl>
<dt>名詞1</dt>
<dd>名詞1解釋1</dd>
<dd>名詞1解釋2</dd>
</dl>
先看看效果圖:
關注我們，dt中，剩下的三個都在<dd>中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=<device-width>, initial-scale=1.0">
<title>自定義列表</title>
</head>
<body>
<dl>
<dt>
關注我們
</dt>
<dd>
新浪微博
<dd>
官方微信
</dd>
<dd>
聯系我們
</dd>
</dl>
</body>
</html>
<dl></dl>中只能包含<dt>和<dd>
<dt>和<dd>包含個數沒有限制，通常是一個<dt>包含很多<dd> 可以再來一組數據
<body>
<dl>
<dt>
關注我們
</dt>
<dd>
新浪微博
<dd>
官方微信
</dd>
<dd>
聯系我們
</dd>
<dt>
關注我們
</dt>
<dd>
新浪微博
<dd>
官方微信
</dd>
<dd>
聯系我們
</dd>
</dl>
</body>
我們來看下效果:
<dt>和<dd>是兄弟關系，并列的，不是包含關系
接著做下列表的總結:
<ul> 無序標簽，里面只能包含<li>, 沒有順序，li里面可以包含任何標簽
<ol> 有序標簽，里面只能包含<li>，有順序，li里面可以包含任何標簽
<dl> 自定義標簽，里面只能包含<dt>和<dd>,dt和dd里可以放任何標簽
后兩者了解就可以了
好的，今天就先到這里了
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
