<think>嗯，用户想知道HTML中
li标签的用法和示例。首先，我得回忆一下
li标签的基本知识。
li是列表项的意思，通常用在ul或ol里面，分别代表无序列表和有序列表。对吧？然后用户可能想了解具体的语法结构，比如怎么嵌套，怎么用CSS来样式化。
根据提供的引用，有几个例子可以参考。比如引用[2]里提到用ul和
li做横向导航菜单，这可能涉及到CSS的display属性设置为in
line或者flex。还有引用[5]中的例子，用DIV结合ul和
li实现表格布局，这说明
li标签的灵活性，可以通过CSS调整边距、宽度等来模拟表格结构。
用户可能需要基础用法和高级应用的例子。比如，基本的无序和有序列表，还有像导航菜单、自定义序号这样的案例。另外，引用[4]提到了ol
标签的高级应用，比如用大写字母作为序号类型，这可能是一个示例
点。
还要注意代码示例的正确性。比如在无序列表中，每个
li前面默认是圆
点，而有序列表则是数字。用户可能想知道如何改变这些符号，这时候CSS的
list-style-type属性就派上用场了，像引用[4]中的例子用了type="A"来改变序号类型，但可能更推荐用CSS来实现。
另外，引用[3]提到了DOM操作，比如通过JavaScript获取
li元素，这可能涉及到动态修改列表内容或样式。但用户的问题可能主要集中在静态HTML结构上，不过还是可以提一下DOM操作的可能性。
还有用户提供的引用中有关于横向菜单的实现，这需要将
li的display属性设置为in
line-block或者使用flex布局，如引用[2]中的示例。横向导航菜单是一个常见的应用场景，应该详细说明。
可能还要注意
li标签的嵌套规则，比如只能在ul或ol中使用，不能单独存在。同时，
li可以包含其他块级元素或内联元素，比如div、p等，但需要符合HTML标准。
总结一下，回答的结构应该是先介绍基本用法，包括无序和有序列表，然后展示示例代码，接着讨论常见应用场景如导航菜单、表格布局等，最后提到DOM操作的可能性。同时要确保所有代码示例使用正确的语法，比如
标签闭合，嵌套正确，并适当引用提供的资料。</think>### HTML `<
li>`
标签用法详解
`<
li>`
标签用于定义列表项（
List Item），必须嵌套在`<ul>`（无序列表）或`<ol>`（有序列表）中。以下是具体用法及示例：
---
#### 一、基础用法
1. **无序列表**：默认
显示圆
点符号
```html
<ul>
<
li>列表项1</
li>
<
li>列表项2</
li>
</ul>
```
效果：
- 列表项1
- 列表项2 [^2]
2. **有序列表**：默认
显示数字序号
```html
<ol>
<
li>第一步</
li>
<
li>第二步</
li>
</ol>
```
效果：
1. 第一步
2. 第二步 [^4]
---
#### 二、高级应用示例
1. **横向导航菜单**
通过CSS将列表项水平排列：
```html
<style>
.nav-menu
li {
display: in
line-block;
margin-right: 20px;
}
</style>
<ul class="nav-menu">
<
li>首页</
li>
<
li>教程</
li>
<
li>关于</
li>
</ul>
```
效果类似引用[2]中的横向菜单示例[^2]
2. **自定义序号样式**
使用`type`属性或CSS修改序号类型：
```html
<ol type="A">
<
li>项目A</
li>
<
li>项目B</
li>
</ol>
```
效果：
A. 项目A
B. 项目B
3. **复杂布局实现**
用`<
li>`模拟表格结构：
```html
<style>
#biaoge
li {
display: in
line-block;
width: 100px;
margin: 5px;
}
</style>
<ul id="biaoge">
<
li>姓名</
li>
<
li>年龄</
li>
<
li>职业</
li>
</ul>
```
如引用[5]所示，可通过CSS实现类似表格的布局[^5]
---
#### 三、DOM操作示例
通过JavaScript获取`<
li>`元素：
```javascript
let
listItems = document.querySelectorAll('
li');
listItems[0].style.color = "red"; // 修改第一个列表项颜色
```
如引用[3]中提到的DOM操作示例[^3]
---
本文介绍了一种快速解决CSS中列表项（li）前图标消失的方法。通过直接在HTML元素上应用list-style:disc属性，可以在不修改原有样式文件的情况下迅速恢复列表项前的标准圆点符号。此外，还介绍了如何更改这些圆点的颜色。
扫一扫
388
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
