HTML 列表项标签 - `<li>`

什么是 `<li>` 标签？

<li> 标签用于定义HTML列表中的列表项。它是列表的基本组成单位，必须嵌套在有序列表(<ol>)、无序列表(<ul>)或菜单列表(<menu>)中使用。

基本语法

在有序列表中使用

html

<ol>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
</ol>

在无序列表中使用

html

<ul>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
</ul>

浏览器默认样式

浏览器会为列表项添加默认样式：

在无序列表中显示为项目符号（通常是实心圆点）
在有序列表中显示为数字或字母编号
默认的内边距和外边距
列表项之间的默认间距

这些默认样式可以通过CSS进行自定义。

主要属性

1. `value` 属性

指定列表项的编号值，仅在有序列表(<ol>)中有效。该属性的值必须是整数。

示例：

html

<ol>
  <li value="10">列表项1</li> <!-- 显示为10 -->
  <li>列表项2</li> <!-- 自动递增为11 -->
  <li value="20">列表项3</li> <!-- 显示为20 -->
  <li>列表项4</li> <!-- 自动递增为21 -->
</ol>

2. `type` 属性（已废弃）

在HTML5中，<li>标签的type属性已被废弃，建议在父元素<ol>上使用type属性或使用CSS替代。

不推荐使用：

html

<ol>
  <li type="A">列表项1</li>
  <li type="A">列表项2</li>
</ol>

推荐使用：

html

<ol type="A">
  <li>列表项1</li>
  <li>列表项2</li>
</ol>

全局属性

<li> 标签支持所有HTML全局属性，常用的包括：

属性	描述
`class`	为列表项指定类名
`id`	为列表项指定唯一ID
`style`	内联样式
`title`	鼠标悬停时显示的提示文本
`lang`	指定列表项内容的语言

最佳实践

1. 正确嵌套列表项

列表项可以包含其他HTML元素，包括嵌套的列表。但要确保嵌套结构正确。

示例：

html

<ul>
  <li>水果
    <ul>
      <li>苹果</li>
      <li>香蕉</li>
      <li>橙子</li>
    </ul>
  </li>
  <li>蔬菜
    <ul>
      <li>胡萝卜</li>
      <li>西兰花</li>
      <li>番茄</li>
    </ul>
  </li>
</ul>

2. 使用CSS自定义列表项样式

使用CSS可以完全自定义列表项的外观，包括项目符号、编号样式、间距等。

示例：

html

<style>
  /* 自定义无序列表的项目符号 */
  ul.custom-bullets li {
    list-style-type: square;
  }
  
  /* 使用图片作为项目符号 */
  ul.image-bullets {
    list-style-image: url('bullet.png');
  }
  
  /* 自定义有序列表的编号 */
  ol.custom-numbers {
    list-style-type: decimal-leading-zero;
  }
  
  /* 自定义列表项的间距和样式 */
  .styled-list li {
    margin-bottom: 10px;
    padding: 5px;
    background-color: #f0f0f0;
    border-radius: 3px;
  }
</style>

<ul class="custom-bullets">
  <li>列表项1</li>
  <li>列表项2</li>
</ul>

<ol class="custom-numbers">
  <li>列表项1</li>
  <li>列表项2</li>
</ol>

<ul class="styled-list">
  <li>带背景的列表项1</li>
  <li>带背景的列表项2</li>
</ul>

3. 使用语义化内容

列表项中可以包含各种HTML元素，如链接、图片、段落等，但应该保持内容的语义化。

示例：

html

<ul>
  <li>
    <a href="#">
      <img src="product1.jpg" alt="产品1">
      <h3>产品名称</h3>
      <p>产品描述</p>
      <span class="price">¥99</span>
    </a>
  </li>
  <li>
    <a href="#">
      <img src="product2.jpg" alt="产品2">
      <h3>产品名称</h3>
      <p>产品描述</p>
      <span class="price">¥199</span>
    </a>
  </li>
</ul>

4. 避免滥用列表

列表应该用于组织相关的项目集合，不要为了布局目的而滥用列表。如果内容之间没有明显的列表关系，应该考虑使用其他HTML元素。

5. 保持列表的简洁性

每个列表项应该保持相对简洁，避免包含过多的复杂内容，以免影响可读性。

常见应用场景

1. 导航菜单

html

<nav>
  <ul>
    <li><a href="#">首页</a></li>
    <li><a href="#">关于我们</a></li>
    <li><a href="#">产品</a></li>
    <li><a href="#">联系我们</a></li>
  </ul>
</nav>

2. 产品列表

html

<h2>热门产品</h2>
<ul class="product-list">
  <li>
    <img src="product1.jpg" alt="产品1">
    <h3>智能手机</h3>
    <p>高性能处理器，高清屏幕</p>
    <span class="price">¥5999</span>
    <button>加入购物车</button>
  </li>
  <li>
    <img src="product2.jpg" alt="产品2">
    <h3>笔记本电脑</h3>
    <p>轻薄设计，长效续航</p>
    <span class="price">¥7999</span>
    <button>加入购物车</button>
  </li>
</ul>

3. 步骤列表

html

<h2>安装步骤</h2>
<ol>
  <li>下载安装包</li>
  <li>运行安装程序</li>
  <li>接受许可协议</li>
  <li>选择安装路径</li>
  <li>等待安装完成</li>
  <li>启动程序</li>
</ol>

4. 嵌套列表

html

<h2>课程大纲</h2>
<ol>
  <li>HTML
    <ul>
      <li>基础语法</li>
      <li>标签和属性</li>
      <li>表单和表格</li>
    </ul>
  </li>
  <li>CSS
    <ul>
      <li>选择器</li>
      <li>盒模型</li>
      <li>布局技术
        <ol>
          <li>Flexbox</li>
          <li>Grid</li>
          <li>定位</li>
        </ol>
      </li>
    </ul>
  </li>
</ol>

与CSS的结合使用

CSS提供了丰富的属性来自定义列表项的样式：

1. 自定义项目符号/编号

css

/* 无序列表项目符号 */
ul {
  list-style-type: disc; /* 默认 */
  /* 其他选项：circle, square, none */
}

/* 有序列表编号 */
ol {
  list-style-type: decimal; /* 默认 */
  /* 其他选项：lower-alpha, upper-alpha, lower-roman, upper-roman等 */
}

/* 使用图片作为项目符号 */
ul.custom-bullets {
  list-style-image: url('bullet.png');
}

/* 自定义编号颜色 */
li::marker {
  color: #0066cc;
  font-weight: bold;
}

2. 自定义列表布局

css

/* 水平列表 */
ul.horizontal-list {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

ul.horizontal-list li {
  display: inline-block;
  margin-right: 20px;
}

/* 自定义列表项样式 */
li.styled-item {
  background-color: #f8f9fa;
  padding: 10px;
  margin-bottom: 8px;
  border-radius: 5px;
  border-left: 4px solid #0066cc;
}

/* 移除默认样式 */
ul.no-style {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

完整示例

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>列表项标签示例</title>
  <style>
    body {
      font-family: 'Arial', sans-serif;
      max-width: 800px;
      margin: 0 auto;
      padding: 20px;
      line-height: 1.6;
    }
    
    h1 {
      color: #333;
      border-bottom: 2px solid #0066cc;
      padding-bottom: 10px;
    }
    
    h2 {
      color: #0066cc;
      margin-top: 30px;
    }
    
    /* 自定义无序列表 */
    ul.fruit-list {
      list-style-type: square;
      background-color: #f8f9fa;
      padding: 20px 30px;
      border-radius: 5px;
    }
    
    ul.fruit-list li {
      margin-bottom: 8px;
    }
    
    /* 自定义有序列表 */
    ol.step-list {
      list-style-type: decimal-leading-zero;
      border-left: 4px solid #0066cc;
      padding-left: 20px;
    }
    
    ol.step-list li {
      margin-bottom: 12px;
      padding: 5px 0;
    }
    
    /* 产品列表 */
    .product-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 20px;
      margin-top: 20px;
    }
    
    .product-item {
      border: 1px solid #ddd;
      border-radius: 5px;
      padding: 15px;
      text-align: center;
      list-style-type: none;
    }
    
    .product-item img {
      max-width: 100%;
      height: auto;
      border-radius: 3px;
      margin-bottom: 10px;
    }
    
    .product-item h3 {
      margin: 10px 0;
      font-size: 18px;
    }
    
    .product-item .price {
      display: block;
      color: #e74c3c;
      font-weight: bold;
      margin: 10px 0;
    }
    
    /* 水平导航 */
    nav ul {
      list-style-type: none;
      padding: 0;
      margin: 0;
      background-color: #333;
      overflow: hidden;
    }
    
    nav ul li {
      float: left;
    }
    
    nav ul li a {
      display: block;
      color: white;
      text-align: center;
      padding: 14px 16px;
      text-decoration: none;
    }
    
    nav ul li a:hover {
      background-color: #111;
    }
  </style>
</head>
<body>
  <h1>HTML 列表项标签的使用</h1>
  
  <!-- 导航菜单 -->
  <nav>
    <ul>
      <li><a href="#">首页</a></li>
      <li><a href="#">产品</a></li>
      <li><a href="#">关于</a></li>
      <li><a href="#">联系</a></li>
    </ul>
  </nav>
  
  <h2>1. 无序列表</h2>
  <ul class="fruit-list">
    <li>苹果</li>
    <li>香蕉</li>
    <li>橙子</li>
    <li>葡萄</li>
    <li>草莓</li>
  </ul>
  
  <h2>2. 有序列表</h2>
  <ol class="step-list">
    <li>准备材料</li>
    <li>清洗水果</li>
    <li>切成小块</li>
    <li>加入酸奶</li>
    <li>搅拌均匀</li>
    <li>享用美食</li>
  </ol>
  
  <h2>3. 使用value属性的有序列表</h2>
  <ol>
    <li value="10">第一步（从10开始）</li>
    <li>第二步（自动递增为11）</li>
    <li value="20">第三步（跳到20）</li>
    <li>第四步（自动递增为21）</li>
  </ol>
  
  <h2>4. 产品列表</h2>
  <ul class="product-grid">
    <li class="product-item">
      <img src="https://via.placeholder.com/200" alt="产品1">
      <h3>智能手机</h3>
      <p>高性能处理器，高清屏幕</p>
      <span class="price">¥5999</span>
      <button>加入购物车</button>
    </li>
    <li class="product-item">
      <img src="https://via.placeholder.com/200" alt="产品2">
      <h3>笔记本电脑</h3>
      <p>轻薄设计，长效续航</p>
      <span class="price">¥7999</span>
      <button>加入购物车</button>
    </li>
    <li class="product-item">
      <img src="https://via.placeholder.com/200" alt="产品3">
      <h3>平板电脑</h3>
      <p>高清显示屏，支持手写</p>
      <span class="price">¥3999</span>
      <button>加入购物车</button>
    </li>
  </ul>
  
  <h2>5. 嵌套列表</h2>
  <ol>
    <li>前端开发
      <ul>
        <li>HTML</li>
        <li>CSS
          <ol>
            <li>Flexbox</li>
            <li>Grid</li>
            <li>定位</li>
          </ol>
        </li>
        <li>JavaScript</li>
      </ul>
    </li>
    <li>后端开发
      <ul>
        <li>Python</li>
        <li>Java</li>
        <li>Node.js</li>
      </ul>
    </li>
  </ol>
</body>
</html>

总结

<li> 标签是HTML列表的基本组成单位，用于定义列表中的每个项目。它可以在有序列表、无序列表或菜单列表中使用。通过CSS，我们可以完全自定义列表项的外观和布局。在实际应用中，应该根据内容的语义选择合适的列表类型，并保持列表结构的清晰和简洁。

HTML 列表项标签 - <li>

什么是 <li> 标签？

基本语法

在有序列表中使用

在无序列表中使用

浏览器默认样式

主要属性

1. value 属性

2. type 属性（已废弃）

全局属性

最佳实践

1. 正确嵌套列表项

2. 使用CSS自定义列表项样式

3. 使用语义化内容

4. 避免滥用列表

5. 保持列表的简洁性

常见应用场景

1. 导航菜单

2. 产品列表

3. 步骤列表

4. 嵌套列表

与CSS的结合使用

1. 自定义项目符号/编号

2. 自定义列表布局

完整示例

总结

HTML 列表项标签 - `<li>`

什么是 `<li>` 标签？

1. `value` 属性

2. `type` 属性（已废弃）