HTML2.1列表标签

 

列表标签种类

无序列表 有序列表 自定义列表

使用场景:在列表中按照行展示关联性内容。

特点:按照行的形式,整齐显示内容。

一、无序列表

标签名说明
ul无序列表整体,用于包裹li标签
li表示无序列表的每一项,用于包含每一项内容

显示特点:列表每一项前默认显示圆点标识。

注:ul中只允许包含li标签。li标签中可以包含任何内容

代码: 

网页效果展示:

 

二、有序列表 

使用场景:一组有顺序之分的列表。

有序列表标签组成
标签名说明
ol有序整体,包裹li标签
li有序列表每一项,包含每一行

 显示特点:列表每一项前默认显示序号标识。

注:ol标签中只允许包含li标签。li标签可以包含任意内容

代码(注意区分与ul的区别):

 

网页效果展示: 

 

三、自定义列表

使用场景:网页底部导航。

例如京东网页底部导航:

 

自定义标签组成
标签名说明
dl自定义标签整体,包裹dt/dd标签
dt自定义列表主题
dd自定义列表针对主题的每一项内容

 显示特点:dd前默认显示缩进

注:dl标签只允许包含dt/dd标签。dt/dd标签可以包含任意内容

代码:

 

 网页效果展示:

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Adellle

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值