HTML2.1列表标签

 

列表标签种类

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

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

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

一、无序列表

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

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

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

代码: 

HTML2.1列表标签_第1张图片

网页效果展示:

HTML2.1列表标签_第2张图片 

二、有序列表 

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

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

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

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

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

HTML2.1列表标签_第3张图片 

网页效果展示: 

HTML2.1列表标签_第4张图片 

三、自定义列表

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

例如京东网页底部导航:HTML2.1列表标签_第5张图片

 

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

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

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

代码:

HTML2.1列表标签_第6张图片 

 网页效果展示:

HTML2.1列表标签_第7张图片

 

你可能感兴趣的:(HTML,html,html5,前端)