列表标签种类
无序列表 有序列表 自定义列表使用场景:在列表中按照行展示关联性内容。
特点:按照行的形式,整齐显示内容。
一、无序列表
标签名 | 说明 |
ul | 无序列表整体,用于包裹li标签 |
li | 表示无序列表的每一项,用于包含每一项内容 |
显示特点:列表每一项前默认显示圆点标识。
注:ul中只允许包含li标签。li标签中可以包含任何内容。
代码:
网页效果展示:
二、有序列表
使用场景:一组有顺序之分的列表。
标签名 | 说明 |
ol | 有序整体,包裹li标签 |
li | 有序列表每一项,包含每一行 |
显示特点:列表每一项前默认显示序号标识。
注:ol标签中只允许包含li标签。li标签可以包含任意内容。
代码(注意区分与ul的区别):
网页效果展示:
三、自定义列表
使用场景:网页底部导航。
例如京东网页底部导航:
标签名 | 说明 |
dl | 自定义标签整体,包裹dt/dd标签 |
dt | 自定义列表主题 |
dd | 自定义列表针对主题的每一项内容 |
显示特点:dd前默认显示缩进
注:dl标签只允许包含dt/dd标签。dt/dd标签可以包含任意内容。
代码:
网页效果展示: