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

一、有序列表

<ol></ol>  有序列表

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

属性

1. compact------h5中不支持，规定列表呈现的效果比正常情况更小巧。

2. revered------规定列表为降序

3. start--------规定列表的起始值

4. 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标签会按照顺序进行排列且在开头用标签标记，标记可以用相关属性进行设置

属性

1. compact------不赞成使用，用css替代，规定列表呈现的效果比正常情况更小巧。

2. 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>

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