PHP小码农

Appearance

li 列表项 ​

<li> 标签用于定义列表中的单个项目。<li> 必须作为 <ul>、<ol> 或 <menu> 的直接子元素使用。在有序列表中，<li> 支持 value 属性来控制当前项的编号。

前置知识

阅读本节前，建议先了解：ol 有序列表

基础概念 ​

<li> 是 "List Item"（列表项）的缩写，是 <ul> 和 <ol> 列表中唯一允许的直接子元素。每个 <li> 代表列表中的一个条目。在无序列表中，<li> 前面显示项目符号；在有序列表中，<li> 前面显示编号。

语法 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>li 示例</title>
</head>
<body>
  <!-- 在 ul 中 -->
  <ul>
    <li>苹果</li>
    <li>香蕉</li>
    <li>橘子</li>
  </ul>

  <!-- 在 ol 中 -->
  <ol>
    <li>第一步</li>
    <li>第二步</li>
    <li>第三步</li>
  </ol>
</body>
</html>

详细说明 ​

li 的 value 属性（ol 中） ​

在有序列表中，<li> 的 value 属性可以改变当前项的编号值，后续项的编号会在此基础上递增：

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>li value 属性</title>
</head>
<body>
  <h1>排名列表</h1>
  <ol>
    <li>第一名：张三 — 98 分</li>
    <li>第二名：李四 — 95 分</li>
    <li value="5">并列第五名：王五 — 85 分</li>
    <li>第六名：赵六 — 82 分</li>
    <li>第七名：钱七 — 80 分</li>
  </ol>
</body>
</html>

value 属性已不推荐

HTML5 规范中，<li> 的 value 属性已不推荐使用，建议通过 CSS counter-reset 和 counter-increment 来控制编号。

li 中可以包含的内容 ​

<li> 可以包含行内元素、块级元素，甚至嵌套的列表：

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>li 内容示例</title>
</head>
<body>
  <ul>
    <!-- 简单文本 -->
    <li>普通文本项</li>

    <!-- 包含多个段落 -->
    <li>
      <p>第一段描述。</p>
      <p>第二段详细说明。</p>
    </li>

    <!-- 嵌套列表 -->
    <li>
      编程语言
      <ul>
        <li>JavaScript</li>
        <li>Python</li>
        <li>Java</li>
      </ul>
    </li>

    <!-- 包含图片 -->
    <li><img src="icon.png" alt="图标"> 带图片的列表项</li>
  </ul>
</body>
</html>

li 的默认样式 ​

属性默认值
displaylist-item
在 ul 中list-style-type: disc
在 ol 中list-style-type: decimal

实战示例 ​

带描述的列表 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>带描述的列表</title>
  <style>
    body { max-width: 680px; margin: 0 auto; padding: 2rem 1rem; font-family: sans-serif; }
    .feature-list { list-style: none; padding: 0; }
    .feature-list li {
      padding: 1rem;
      margin-bottom: 1rem;
      border: 1px solid #eee;
      border-radius: 4px;
    }
    .feature-list li strong { display: block; margin-bottom: 0.25rem; }
    .feature-list li p { margin: 0; color: #666; font-size: 0.9rem; }
  </style>
</head>
<body>
  <h1>产品特性</h1>
  <ul class="feature-list">
    <li>
      <strong>高性能</strong>
      <p>基于最新技术架构，响应速度提升 50%。</p>
    </li>
    <li>
      <strong>安全可靠</strong>
      <p>通过 ISO 27001 安全认证，数据全程加密。</p>
    </li>
    <li>
      <strong>易于使用</strong>
      <p>简洁的界面设计，5 分钟即可上手。</p>
    </li>
  </ul>
</body>
</html>

注意事项 ​

  • <li> 只能作为 <ul>、<ol> 或 <menu> 的直接子元素
  • 不要在列表外单独使用 <li>
  • value 属性在 HTML5 中已不推荐，改用 CSS

最佳实践 ​

  1. 语义清晰：每个 <li> 应是一个完整、独立的条目
  2. 嵌套列表：在 <li> 内嵌套子列表
  3. 使用 CSS 定制：通过 CSS 控制编号和符号
  4. value 属性替代：使用 CSS counter 代替 value 属性

下一节

继续学习：dl / dt / dd 定义列表

参考链接 ​