列表 · 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> ```