HTML的li标签
HTML中的li标签技术文档
简介
在HTML中,li标签(<li>)是列表(列表项)的元素标签,主要用于表示有序或无序列表的列表项。
使用方式
li标签一般需要放在有序列表(<ol>)或无序列表(<ul>)标签中,作为列表的每一项,如下代码示例所示:
<ul>
<li>这是列表项1</li>
<li>这是列表项2</li>
<li>这是列表项3</li>
</ul>
<ol>
<li>这是有序列表项1</li>
<li>这是有序列表项2</li>
<li>这是有序列表项3</li>
</ol>
在使用li标签时需要注意几点:
- <li>标签必须放在<ul>或<ol>标签内,否则将无法正常显示;
- 可自定义列表样式,使用CSS样式属性改变列表项的格式;
- li标签是块级元素,在列表中默认独占一行,无法与其它元素共用一行;
属性
li标签通常不需要添加属性,以下是li标签常用的属性:
- value属性: 用于指定有序列表项的值,可以设置任意数字,该数字将作为有序列表项的显示值。如下例所示:
<ol>
<li value="3">这是有序列表项3</li>
<li value="4">这是有序列表项4</li>
<li>这是有序列表项5</li>
</ol>
- class属性:用于给li标签设置一个或多个CSS类名,便于使用CSS样式属性进行设置样式。如下所示:
<ul>
<li class="list-title">这是列表项1</li>
<li class="list-item">这是列表项2</li>
<li class="list-item">这是列表项3</li>
</ul>
显示效果
li标签的显示效果可以通过CSS进行更改,以下是li标签在默认样式和自定义样式下的效果:
默认样式
,默认样式下li标签是独占一行,所在列表项前自带一个小圆点(无序列表)或数字(有序列表)。
自定义样式
通过CSS样式属性可以自定义li标签的样式,包括字体、颜色、边框等。如下所示:
<style>
.my-list li {
display: inline-block;
padding: 6px 12px;
border: 1px solid #ccc;
background-color: #f5f5f5;
margin-right: 10px;
}
</style>
<ul class="my-list">
<li>这是自定义样式列表项1</li>
<li>这是自定义样式列表项2</li>
<li>这是自定义样式列表项3</li>
</ul>
通过上述代码设置,列表项的显示效果将变为行内块元素,列表项之间添加10像素的右边距,并且设置了背景颜色、边框等CSS样式属性。
总结
li标签是HTML中常用的列表元素标签之一,主要用于表示无序或有序列表的每一项。在使用li标签时,需要放置在ul或ol标签中,并可以配合CSS样式属性设置列表项的样式效果。