<li>-列表项

<li> 是 HTML 中用于定义列表项的标签，通常嵌套在 <ul>（无序列表）或 <ol>（有序列表）中。它的灵活性和简单语法使其成为构建导航菜单、内容目录或步骤说明的常用工具。

<li> 的基本用法

<li> 标签必须作为 <ul> 或 <ol> 的直接子元素使用。以下是一个基础的无序列表示例：

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

有序列表的写法类似，只是外层标签改为 <ol>：

<ol>
  <li>第一步：烧水</li>
  <li>第二步：放入茶叶</li>
  <li>第三步：等待3分钟</li>
</ol>

嵌套列表的实现

<li> 可以包含完整的列表结构，实现多级嵌套：

<ul>
  <li>水果
    <ul>
      <li>苹果</li>
      <li>芒果</li>
    </ul>
  </li>
  <li>蔬菜
    <ul>
      <li>菠菜</li>
      <li>胡萝卜</li>
    </ul>
  </li>
</ul>

样式控制技巧

通过 CSS 可以自定义列表标记样式。以下示例将无序列表的标记改为方块：

<style>
  ul.custom {
    list-style-type: square;
  }
</style>

<ul class="custom">
  <li>红色</li>
  <li>绿色</li>
  <li>蓝色</li>
</ul>

有序列表支持多种编号样式：

<ol type="A">
  <li>第一章</li>
  <li>第二章</li>
</ol>

结合其他 HTML 元素

<li> 可以包含各种 HTML 元素，制作复杂内容：

<ul>
  <li>
    <h3>标题</h3>
    <p>描述文字...</p>
    <button>点击</button>
  </li>
  <li>
    <img src="image.jpg" alt="示例图片">
  </li>
</ul>

动态生成列表

JavaScript 可以动态创建列表内容：

<script>
  const data = ['项目A', '项目B', '项目C'];
  const ul = document.createElement('ul');
  
  data.forEach(item => {
    const li = document.createElement('li');
    li.textContent = item;
    ul.appendChild(li);
  });
  
  document.body.appendChild(ul);
</script>

特殊属性应用

value 属性可以改变有序列表项的编号：

<ol>
  <li value="5">第五项</li>
  <li>第六项</li>
  <li value="10">第十项</li>
</ol>

无障碍访问建议

为屏幕阅读器用户提供更好的体验：

<ul aria-label="主要导航">
  <li><a href="#home">首页</a></li>
  <li><a href="#about">关于</a></li>
</ul>

实际应用场景

1. 导航菜单的实现：

<nav>
  <ul class="menu">
    <li><a href="/">首页</a></li>
    <li><a href="/products">产品</a></li>
    <li><a href="/contact">联系我们</a></li>
  </ul>
</nav>

2. 步骤指示器：

<div class="steps">
  <ol>
    <li class="completed">填写信息</li>
    <li class="current">确认订单</li>
    <li>完成支付</li>
  </ol>
</div>

浏览器兼容性说明

所有现代浏览器都完整支持 <li> 标签，包括：

• Chrome 1+
• Firefox 1+
• Safari 1+
• Edge 12+
• Opera 6.1+

性能优化提示

当处理超长列表时（超过 1000 项），建议使用虚拟滚动技术：

// 使用第三方库实现虚拟滚动
import { VirtualScroll } from 'virtual-scroll-library';

new VirtualScroll({
  container: '#long-list',
  itemHeight: 40,
  renderItem: (index) => `<li>项目 ${index + 1}</li>`,
  totalItems: 10000
});