🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
## 列表 在许多网站上,我们都能看到类似下图的排行版、新闻列表等内容,对于这些内容,我们使用列表标签进行开发。 列表分为有序列表和无序列表。 ### 无序列表 无序列表是一个项目的列表,此列项目使用粗体圆点(典型的小黑圆圈)进行标记。 无序列表使用`<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> ```