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样式属性设置列表项的样式效果。