HTML 列表 · HTML開發手冊

# HTML 列表 HTML 列表 HTML 支持有序、無序和定義列表: HTML 列表有序列表第一個列表項第二個列表項第三個列表項無序列表列表項列表項列表項在線實例無序列表本例演示無序列表。有序列表本例演示有序列表。（可以在本頁底端找到更多實例。） HTML無序列表無序列表是一個項目的列表，此列項目使用粗體圓點（典型的小黑圓圈）進行標記。 * * * HTML 支持有序、無序和定義列表: ## HTML 列表有序列表第一個列表項第二個列表項第三個列表項無序列表列表項列表項列表項 * * * 在線實例 1.無序列表本例演示無序列表。 ## 實例 ~~~ <!DOCTYPE?html> <html> <head>? <meta?charset="utf-8">? <title>php中文網(php.cn)</title>? </head>? <body> <h4>無序列表:</h4> <ul> ??<li>Coffee</li> ??<li>Tea</li> ??<li>Milk</li> </ul> </body> </html> ~~~ [運行實例 ?](https://www.php.cn/html/html-lists.html#) 點擊 "運行實例" 按鈕查看在線實例 2.有序列表本例演示有序列表。 ## 實例 ~~~ <!DOCTYPE?html> <html> <head>? <meta?charset="utf-8">? <title>php中文網(php.cn)</title>? </head> <body> <ol> ??<li>Coffee</li> ??<li>Tea</li> ??<li>Milk</li> </ol> <ol?start="50"> ??<li>Coffee</li> ??<li>Tea</li> ??<li>Milk</li> </ol> ? </body> </html> ~~~ [運行實例 ?](https://www.php.cn/html/html-lists.html#) 點擊 "運行實例" 按鈕查看在線實例（可以在本頁底端找到更多實例。） * * * ## HTML無序列表無序列表是一個項目的列表，此列項目使用粗體圓點（典型的小黑圓圈）進行標記。無序列表使用標簽 Coffee Milk 瀏覽器顯示如下： * Coffee * Milk * * * ## HTML 有序列表同樣，有序列表也是一列項目，列表項目使用數字進行標記。有序列表始于標簽。每個列表項始于標簽。列表項項使用數字來標記。 Coffee Milk 瀏覽器中顯示如下： 1. Coffee 2. Milk * * * ## HTML 自定義列表自定義列表不僅僅是一列項目，而是項目及其注釋的組合。自定義列表以標簽開始。每個自定義列表項以開始。每個自定義列表項的定義以開始。 ~~~ <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 * * * ## 注意事項 - 有用提示 **提示:**列表項內部可以使用段落、換行符、圖片、鏈接以及其他列表等等。 ## 更多實例 1.不同類型的有序列表本例演示不同類型的有序列表。 ## 實例 ~~~ <!DOCTYPE?html> <html> <head>? <meta?charset="utf-8">? <title>php中文網(php.cn)</title>? </head> <body> <h4>編號列表：</h4> <ol> ?<li>Apples</li> ?<li>Bananas</li> ?<li>Lemons</li> ?<li>Oranges</li> </ol>?? <h4>大寫字母列表：</h4> <ol?type="A"> ?<li>Apples</li> ?<li>Bananas</li> ?<li>Lemons</li> ?<li>Oranges</li> </ol>?? <h4>小寫字母列表：</h4> <ol?type="a"> ?<li>Apples</li> ?<li>Bananas</li> ?<li>Lemons</li> ?<li>Oranges</li> </ol>?? <h4>羅馬數字列表：</h4> <ol?type="I"> ?<li>Apples</li> ?<li>Bananas</li> ?<li>Lemons</li> ?<li>Oranges</li> </ol>?? <h4>小寫羅馬數字列表：</h4> <ol?type="i"> ?<li>Apples</li> ?<li>Bananas</li> ?<li>Lemons</li> ?<li>Oranges</li> </ol>?? </body> </html> ~~~ [運行實例 ?](https://www.php.cn/html/html-lists.html#) 點擊 "運行實例" 按鈕查看在線實例 2.不同類型的無序列表本例演示不同類型的無序列表。 ## 實例 ~~~ <!DOCTYPE?html> <html> <head>? <meta?charset="utf-8">? <title>php中文網(php.cn)</title>? </head> <body> <p><b>注意：</b>?在?HTML?4中?ul?屬性已廢棄，HTML5?已不支持該屬性，因此我們使用?CSS?代替來定義不同類型的無序列表如下：</p> <h4>圓點列表：</h4> <ul?style="list-style-type:disc"> ?<li>Apples</li> ?<li>Bananas</li> ?<li>Lemons</li> ?<li>Oranges</li> </ul>?? <h4>圓圈列表：</h4> <ul?style="list-style-type:circle"> ?<li>Apples</li> ?<li>Bananas</li> ?<li>Lemons</li> ?<li>Oranges</li> </ul>?? <h4>正方形列表：</h4> <ul?style="list-style-type:square"> ?<li>Apples</li> ?<li>Bananas</li> ?<li>Lemons</li> ?<li>Oranges</li> </ul> </body> </html> ~~~ [運行實例 ?](https://www.php.cn/html/html-lists.html#) 點擊 "運行實例" 按鈕查看在線實例 3.嵌套列表本例演示如何嵌套列表。 ## 實例 ~~~ <!DOCTYPE?html> <html> <head>? <meta?charset="utf-8">? <title>php中文網(php.cn)</title>? </head> <body> <h4>嵌套列表：</h4> <ul> ??<li>Coffee</li> ??<li>Tea ????<ul> ??????<li>Black?tea</li> ??????<li>Green?tea</li> ????</ul> ??</li> ??<li>Milk</li> </ul> </body> </html> ~~~ [運行實例 ?](https://www.php.cn/html/html-lists.html#) 點擊 "運行實例" 按鈕查看在線實例 4.嵌套列表 2 本例演示更復雜的嵌套列表。 ## 實例 ~~~ <!DOCTYPE?html> <html> <head>? <meta?charset="utf-8">? <title>php中文網(php.cn)</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> ~~~ [運行實例 ?](https://www.php.cn/html/html-lists.html#) 點擊 "運行實例" 按鈕查看在線實例 5.自定義列表本例演示一個定義列表。 ## 實例 ~~~ <!DOCTYPE?html> <html> <head>? <meta?charset="utf-8">? <title>php中文網(php.cn)</title>? </head> <body> <h4>一個自定義列表：</h4> <dl> ??<dt>Coffee</dt> ??<dd>-?black?hot?drink</dd> ??<dt>Milk</dt> ??<dd>-?white?cold?drink</dd> </dl> </body> </html> ~~~ [運行實例 ?](https://www.php.cn/html/html-lists.html#) 點擊 "運行實例" 按鈕查看在線實例 * * * ## HTML 列表標簽 | 標簽 | 描述 | | :-- | :-- | | [](http://www.php.cn/dic/html/ol.html) | 定義有序列表 | | [](http://www.php.cn/dic/html/ul.html) | 定義無序列表 | | [](http://www.php.cn/dic/html/li.html) | 定義列表項 | | [](http://www.php.cn/dic/html/dl.html) | 定義定義列表 | | [](http://www.php.cn/dic/html/dt.html) | 自定義列表項目 | | [](http://www.php.cn/dic/html/dd.html) | 定義自定列表項的描述 |