HTML li列表项：构建有序与无序内容的基石

2025-12-23 9878阅读

在网页开发的世界里，HTML（超文本标记语言）是构建网页结构的基础。而其中的<li>列表项标签，就像是搭建内容大厦的一块块重要砖石，无论是有序列表还是无序列表，都离不开它的身影。

无序列表中的<li>

无序列表使用<ul>标签来定义，而<li>则是其中的每一个列表项。例如：

<ul>
  <li>苹果</li>
  <li>香蕉</li>
  <li>橙子</li>
</ul>

在上面的代码中，<ul>创建了一个无序列表，里面的三个<li>分别代表了不同的水果。浏览器在渲染时，会自动为每个<li>项添加一个默认的项目符号（通常是小圆点），让内容呈现出一种松散但有条理的排列。这种无序列表常用于展示没有特定顺序的信息集合，比如商品的特性列表、菜单选项等。

有序列表中的<li>

有序列表通过<ol>标签定义，<li>同样是列表项。示例如下：

<ol>
  <li>第一步：准备食材</li>
  <li>第二步：清洗食材</li>
  <li>第三步：开始烹饪</li>
</ol>

这里的<ol>创建了有序列表，<li>项会按照顺序显示编号（如1.、2.、3.）。有序列表适用于有明确步骤、顺序的内容展示，像操作指南、教程步骤等场景。

<li>的样式定制

默认的<li>样式可能无法满足网页设计的需求，我们可以通过CSS来对其进行丰富的样式定制。比如改变项目符号的样式：

<!DOCTYPE html>
<html>

<head>
  <style>
    ul {
      list-style-type: square; /* 将无序列表项目符号改为方形 */
    }
  </style>
</head>

<body>
  <ul>
    <li>项目一</li>
    <li>项目二</li>
  </ul>
</body>

</html>

对于有序列表，也能修改编号的样式，如：

<!DOCTYPE html>
<html>

<head>
  <style>
    ol {
      list-style-type: upper-roman; /* 将有序列表编号改为大写罗马数字 */
    }
  </style>
</head>

<body>
  <ol>
    <li>第一项</li>
    <li>第二项</li>
  </ol>
</body>

</html>

还可以去掉列表项的默认样式（项目符号或编号），然后通过背景图片等方式自定义独特的样式效果。

<li>的嵌套使用

<li>还支持嵌套，这在构建复杂层级结构的列表时非常有用。例如：

<ul>
  <li>水果
    <ul>
      <li>苹果</li>
      <li>香蕉</li>
    </ul>
  </li>
  <li>蔬菜
    <ul>
      <li>白菜</li>
      <li>萝卜</li>
    </ul>
  </li>
</ul>

这样就创建了一个具有层级关系的列表结构，外层<li>是大类（水果、蔬菜），内层<li>是各自的子类。

结语

HTML 的<li>列表项看似简单，但却在网页内容组织中扮演着关键角色。无论是简洁的信息罗列，还是复杂的层级结构展示，它都能胜任。通过合理运用<li>，结合<ul>和<ol>，再加上CSS的样式定制，我们可以打造出既美观又符合逻辑的网页列表内容，为用户提供清晰、有条理的信息呈现，是网页开发中不可或缺的基础元素之一。

文章版权声明：除非注明，否则均为Dark零点博客原创文章，转载或复制请以超链接形式并注明出处。

相关阅读

目录[+]