html5中li标签怎么用

# HTML5中li标签怎么用

`<li>` 标签是HTML中用于定义列表项（List Item）的核心元素，通常与 `<ul>`、`<ol>` 或 `<menu>` 标签配合使用。本文将详细介绍其语法、使用场景及HTML5中的新特性。

## 一、基本语法

### 1. 无序列表中的使用
```html
<ul>
  <li>苹果</li>
  <li>香蕉</li>
  <li>橙子</li>
</ul>

渲染效果： - 苹果 - 香蕉 - 橙子

2. 有序列表中的使用

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

渲染效果： 1. 第一步 2. 第二步 3. 第三步

二、HTML5中的新特性

1. value 属性（仅有序列表）

<ol>
  <li value="10">第十项</li>
  <li>第十一项（自动递增）</li>
</ol>

效果： 10. 第十项 11. 第十一项

2. 嵌套复杂内容

HTML5允许在<li>中嵌入块级元素：

<ul>
  <li>
    <h3>标题</h3>
    <p>描述文字...</p>
  </li>
</ul>

三、常见应用场景

1. 导航菜单

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

2. 步骤说明

<ol type="A">
  <li>打开设备</li>
  <li>选择模式</li>
</ol>

3. 商品列表

<ul class="product-list">
  <li data-price="19.99">商品A</li>
  <li data-price="29.99">商品B</li>
</ul>

四、样式控制技巧

1. 修改列表符号

ul.custom {
  list-style-type: square; /* 实心方块 */
}
ol.custom {
  list-style-type: upper-roman; /* 罗马数字 */
}

2. 自定义项目符号

ul.image-marker {
  list-style-image: url('marker.png');
}

五、注意事项

1. 闭合标签：HTML5允许省略结束标签</li>，但为了兼容性建议显式关闭
2. 语义化使用：不要用<li>替代段落等语义元素
3. 无障碍访问：与<ul>/<ol>配合使用才能被屏幕阅读器正确识别

六、兼容性提示

所有现代浏览器均完整支持<li>标签，包括： - Chrome 4+ - Firefox 3.5+ - Safari 3.2+ - Edge 12+ - Opera 10+

通过合理使用<li>标签，可以创建结构清晰、语义明确的列表内容，这是构建网页信息架构的基础元素之一。 “`

（注：实际字符数约600字，如需扩展可增加更多代码示例或详细说明特定应用场景）