2025年Web前端开发列表标签相关用法和属性

大家好，我是讯享网，很高兴认识大家。

一、有序列表

<ol></ol> 有序列表

需要与<li></li>标签连用，<li>标签为数据标签，有序列表中li标签会按照顺序进行排列，序号和排序顺序可以用相关属性进行设置

属性

compact------h5中不支持，规定列表呈现的效果比正常情况更小巧。
revered------规定列表为降序
start--------规定列表的起始值
type---------规定列表序号，值为1，A，a，I，i，分别为阿拉伯数字，大写英文，小写英文，大写罗马数字，小写罗马数字

以下是相关代码以及效果展示

<ol reversed> <li>属性值</li> <li>compact------h5中不支持，规定列表呈现的效果比正常情况更小巧。</li> <li>revered------规定列表为降序</li> <li>start--------规定列表的起始值</li> <li>type---------规定列表序号，值为1，A，a，I，i，分别为阿拉伯数字，大写英文，小写英文，大写罗马数字，小写罗马数字</li> </ol>

讯享网

讯享网<ol start="2"> <li>属性值</li> <li>compact------h5中不支持，规定列表呈现的效果比正常情况更小巧。</li> <li>revered------规定列表为降序</li> <li>start--------规定列表的起始值</li> <li>type---------规定列表序号，值为1，A，a，I，i，分别为阿拉伯数字，大写英文，小写英文，大写罗马数字，小写罗马数字</li> </ol>

<ol type="i"> <li>属性值</li> <li>compact------h5中不支持，规定列表呈现的效果比正常情况更小巧。</li> <li>revered------规定列表为降序</li> <li>start--------规定列表的起始值</li> <li>type---------规定列表序号，值为1，A，a，I，i，分别为阿拉伯数字（默认），大写英文，小写英文，大写罗马数字，小写罗马数字</li> </ol>

二、无序列表

<ul></ul> 无序列表

需要与<li></li>标签连用，<li>标签为数据标签，无序列表中li标签会按照顺序进行排列且在开头用标签标记，标记可以用相关属性进行设置

属性

compact------不赞成使用，用css替代，规定列表呈现的效果比正常情况更小巧。
type---------不赞成使用，用css替代，值为disc(实心圆)默认，square(实心正方形)，circle(空心圆)

以下是相关代码及效果展示

讯享网<ul> <li>属性值</li> <li>compact------不赞成使用，用css替代，规定列表呈现的效果比正常情况更小巧。</li> <li>type---------不赞成使用，用css替代，值为disc(实心圆)默认，square(实心正方形)，circle(空心圆) </li> </ul>

<ul type="square"> <li>属性值</li> <li>compact------不赞成使用，用css替代，规定列表呈现的效果比正常情况更小巧。</li> <li>type---------不赞成使用，用css替代，值为disc(实心圆)默认，square(实心正方形)，circle(空心圆) </li> </ul>

讯享网<ul type="circle"> <li>属性值</li> <li>compact------不赞成使用，用css替代，规定列表呈现的效果比正常情况更小巧。</li> <li>type---------不赞成使用，用css替代，值为disc(实心圆)默认，square(实心正方形)，circle(空心圆) </li> </ul>

三、数据列表（自定义列表）

数据列表<dl></dl>需要和<dt></dt>以及<dd></dd>标签连用

其中<dt>标签中的是列表标题，<dd>标签中的是列表数据项

在h5之后，<dl>标签中允许使用多个<dt>标签

代码及效果如下

<dl> <dt>标题dt</dt> <dd>内容dd</dd> <dt>在h5中一个dl中可以存在多个dt</dt> <dd>内容dd</dd> </dl>

以上便是对于列表相关标签的用法和属性的总结，希望能够对您有所帮助。

2025年Web前端开发 列表标签相关用法和属性

一、有序列表

二、无序列表

三、数据列表（自定义列表）

相关推荐

2025年Web前端开发列表标签相关用法和属性