一、列表标签
1.列表的应用场景
- 场景:在网页中按照行展示关联性的内容,如:新闻列表、排行榜、账单等
- 特点:按照行的方式,整齐显示内容
- 种类:无序列表、有序列表、自定义列表
2、无序列表
2.1 无序列表
场景:在网页中表示一组无顺序之分的列表,如:新闻列表
标签组成:
标签名 | 说明 |
ul | 表示无序列表的整体,用于包裹li标签 |
li | 表示无序列表的每一项,用于包含每一行的内容 |
显示特点:
- 列表的每一项前默认显示圆点标识
注意点:
- ul标签中只允许包含li标签
- li标签可以包含任意内容
- 去掉无序列表前的圆点:list-style-type:none;
<!-- ul表示无序列表的整体 -->
<!-- li表示无序列表的每一项 -->
<ul>
<li>榴莲</li>
<li>香蕉</li>
<li>苹果</li>
<li>哈密瓜</li>
<li>火龙果</li>
</ul>
3.有序列表
3.1 有序列表
场景:在网页中表示一组有顺序之分的列表,如:排行榜
标签组成:
标签名 | 说明 |
ol | 表示有序列表的整体,用于包裹li标签 |
li | 表示有序列表的每一项,用于包含每一行的内容 |
显示特点:
- 列表的每一项前默认显示序号标识
注意点:
- ol标签中只允许包含li标签
- li标签可以包含任意内容
<h1>成绩排行榜</h1>
<!-- ol表示有序列表的整体 -->
<!-- li表示有序列表的每一项 -->
<ol>
<li>小姐姐:100分</li>
<li>小帅哥:80分</li>
<li>小可爱:60分</li>
</ol>
不同类型的有序列表:https://www.runoob.com/try/try.php?filename=tryhtml_lists_ordered
不同类型的无序列表: