<li>-列表项

<li> 标签的基本定义

<li> 是 HTML 中用于定义列表项的标签，必须嵌套在 <ul>（无序列表）或 <ol>（有序列表）中使用。它没有必需的属性，但可以通过 value（仅限有序列表）和 type 等属性进行额外控制。

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

<ol>
  <li>第一步</li>
  <li>第二步</li>
</ol>

无序列表中的 <li>

在 <ul> 中，<li> 默认显示为实心圆点（disc），可通过 CSS 修改样式。每个列表项会独立换行显示，形成垂直列表结构。

<ul>
  <li>红色</li>
  <li>绿色</li>
  <li>蓝色</li>
</ul>

实际渲染效果：

• 红色
• 绿色
• 蓝色

有序列表中的 <li>

在 <ol> 中，<li> 会自动编号。通过 start 属性可以设置起始编号，reversed 属性可实现倒序编号。

<ol start="5">
  <li>第五项</li>
  <li>第六项</li>
</ol>

<ol reversed>
  <li>第三项</li>
  <li>第二项</li>
  <li>第一项</li>
</ol>

<li> 的 value 属性

仅对有序列表有效，可强制设置当前项的编号值，后续项会据此重新计算序号。

<ol>
  <li value="10">项目十</li>
  <li>项目十一</li>  <!-- 自动延续编号 -->
  <li value="5">项目五</li>  <!-- 手动干预编号 -->
  <li>项目六</li>  <!-- 继续从5递增 -->
</ol>

嵌套列表的实现

<li> 可以包含完整的列表结构，实现多级嵌套。注意保持正确的标签闭合。

<ul>
  <li>水果
    <ul>
      <li>苹果</li>
      <li>橙子</li>
    </ul>
  </li>
  <li>蔬菜
    <ol>
      <li>胡萝卜</li>
      <li>西兰花</li>
    </ol>
  </li>
</ul>

CSS 样式控制

通过 CSS 可以完全自定义 <li> 的显示样式，包括列表标记类型、位置和自定义图标。

ul.custom {
  list-style-type: none;  /* 移除默认标记 */
  padding-left: 0;
}

ul.custom li {
  padding: 5px 0;
  background: url('icon.png') no-repeat left center;
  padding-left: 30px;
}

ol.roman {
  list-style-type: upper-roman;
}

交互式列表项

结合 JavaScript 可实现动态交互效果，如点击事件、动态添加/删除项等。

<ul id="dynamic-list">
  <li>初始项目</li>
</ul>

<script>
  const list = document.getElementById('dynamic-list');
  list.addEventListener('click', (e) => {
    if(e.target.tagName === 'LI') {
      e.target.classList.toggle('completed');
    }
  });
  
  // 动态添加新项
  function addItem(text) {
    const li = document.createElement('li');
    li.textContent = text;
    list.appendChild(li);
  }
</script>

无障碍访问考虑

为 <li> 提供良好的无障碍支持：

• 在导航菜单中使用 <nav> 包裹列表
• 为可点击项添加 role="button"
• 避免仅依赖颜色传达信息

<nav aria-label="主菜单">
  <ul>
    <li><a href="#" role="menuitem">首页</a></li>
    <li><a href="#" role="menuitem">产品</a></li>
  </ul>
</nav>

实际应用场景

1. 导航菜单：

<nav>
  <ul class="nav-menu">
    <li><a href="/">首页</a></li>
    <li><a href="/about">关于</a></li>
  </ul>
</nav>

2. 步骤说明：

<ol class="steps">
  <li>填写基本信息</li>
  <li>验证邮箱</li>
  <li>完成注册</li>
</ol>

3. 商品特征列表：

<ul class="features">
  <li>支持4K分辨率</li>
  <li>防水防尘</li>
  <li>两年质保</li>
</ul>

浏览器兼容性说明

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

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

需要注意的兼容性问题：

• IE8 及更早版本对 CSS 列表样式支持有限
• 某些移动浏览器可能忽略 value 属性
• 使用自定义列表标记时需测试跨浏览器表现

性能优化建议

当处理大型列表时：

• 使用虚拟滚动技术只渲染可见项
• 避免在 <li> 中使用复杂布局
• 对静态列表考虑服务器端渲染

// 虚拟滚动示例
const virtualList = new VirtualScroller({
  element: document.getElementById('long-list'),
  items: Array(1000).fill().map((_,i) => `项目 ${i+1}`),
  renderItem: (text) => {
    const li = document.createElement('li');
    li.textContent = text;
    return li;
  }
});