列表 · Web前端(打印用)

## 列表在許多網站上，我們都能看到類似下圖的排行版、新聞列表等內容，對于這些內容，我們使用列表標簽進行開發。列表分為有序列表和無序列表。 ### 無序列表無序列表是一個項目的列表，此列項目使用粗體圓點（典型的小黑圓圈）進行標記。無序列表使用`<ul>`標簽。 ```html <ul> <li>精彩少年</li> <li>美麗突然出現</li> <li>觸動心靈的旋律</li> </ul> ``` ### 有序列表如果想在網頁中展示有前后順序的信息列表，怎么辦呢？如，當當網上的書籍熱賣排行榜，這類信息展示就可以使用`<ol>`標簽來制作有序列表來展示。 ```html <ol> <li>前端開發面試心法 </li> <li>零基礎學習html</li> <li>JavaScript全攻略</li> </ol> ``` `<ol>`在網頁中顯示的默認樣式一般為：每項`<li>`前都自帶一個序號，序號默認從1開始。 ### 自定義列表自定義列表不僅僅是一列項目，而是項目及其注釋的組合。自定義列表以 `<dl>` 標簽開始。每個自定義列表項以 `<dt>` 開始。每個自定義列表項的定義以 `<dd>` 開始。 ~~~html <dl> <dt>Coffee</dt> <dd>Black hot drink</dd> <dt>Milk</dt> <dd>White cold drink</dd> </dl> ~~~ ### 為CODING COFFEE制作門店列表頁 ```html <body> <h1>加盟門店</h1> <ul> <li>北京朝陽區奧林匹克公園旗艦店</li> <li>紐約布魯克林14大街店</li> <li>曼徹斯特老特拉福德球場店</li> <li>索馬里海岸121軍火倉庫店</li> <li>南通市崇川區醫校巷3號特邀門店</li> </ul> </body> ```