HTML學習4：常用標簽之列表標簽 · Web前端HTML+CSS+JS初級入門

HTML 列表標簽支持有序、無序和定義列表。列表標簽表格： ![](https://box.kancloud.cn/2016-04-28_5721558722213.jpg) ### 一.無序列表無序列表是一個項目的列表。無序列表項開始于 < ul> 標簽，結束于< /ul>標簽。每個列表項開始于 < li>標簽，結束于</ li>標簽。列表項內部可以使用段落、換行符、圖片、鏈接以及其他列表等等。在這里只是最基礎的文字來演示。 ~~~ <html> <head> <title>列表標簽演示</title> </head> <body> <h1>這是一個無序列表標簽演示</h1> <ul> <li>蘋果</li> <li>香蕉</li> <li>葡萄</li> <li>西瓜</li> <li>荔枝</li> </ul> </body> </html> ~~~ 瀏覽器結果顯示為： ![](https://box.kancloud.cn/2016-04-28_5721558733a13.jpg) ### 二.有序列表同樣，有序列表也是一列項目，列表項目使用數字，字母等進行標記。有序列表開始于 < ol> 標簽，結束于< /ol>標簽。每個列表項始于 < li> 標簽，結束于< /li>標簽。列表項內部可以使用段落、換行符、圖片、鏈接以及其他列表等等。 ~~~ <html> <head> <title>列表標簽演示</title> </head> <body> <h1>這是一個有序列表標簽演示</h1> <ol type="a"> <li>蘋果</li> <li>香蕉</li> <li>葡萄</li> <li>西瓜</li> <li>荔枝</li> </ol> </body> </html> ~~~ 瀏覽器結果顯示為： ![](https://box.kancloud.cn/2016-04-28_572155874429a.jpg) ~~~ <html> <head> <title>列表標簽演示</title> </head> <body> <h1>這是一個有序列表標簽演示</h1> <ol type="1"> <li>蘋果</li> <li>香蕉</li> <li>葡萄</li> <li>西瓜</li> <li>荔枝</li> </ol> </body> </html> ~~~ 瀏覽器結果顯示為： ![](https://box.kancloud.cn/2016-04-28_57215587553d8.jpg) ### 三.定義列表自定義列表不僅僅是一列項目，而是項目及其注釋的組合。自定義列表以 < dl> 標簽開始，結束于< /dl>標簽。每個自定義列表項以 < dt> 開始，結束于< /dt>標簽。每個自定義列表項的定義以 < dd> 開始，結束于< /dd>標簽。定義列表的列表項內部可以使用段落、換行符、圖片、鏈接以及其他列表等等。 ~~~ <html> <head> <title>列表標簽演示</title> </head> <body> <h1>這是一個定義列表標簽演示</h1>  <dl> <dt>游戲名稱</dt> <dd>紅色警戒</dd> <dd>三國無雙</dd> <dd>反恐精英</dd> <dd>街頭籃球</dd> </dl> </body> </html> ~~~ 瀏覽器結果顯示為： ![](https://box.kancloud.cn/2016-04-28_572155876609e.jpg) 對于列表標簽，可以自己和自己嵌套，也可以和其他的列表標簽嵌套。