HTML li 语法
在 HTML 中，li 标签用于定义列表项。它通常与 ol 标签一起使用来创建有序列表，或者与 ul 标签一起使用来创建无序列表。
语法：
<li>列表项</li>说明：
li，是 “list item” 的缩写。li 标签不能单独使用，而只能作为以下元素的子元素。
ul：无序列表。ol：有序列表。menu：菜单列表，HTML5 中重新引入，用于上下文菜单或工具栏，与 ul 略有不同。
li 有一个 value 属性（仅限用于有序列表 ol），用于指定当前列表项的数值。然后后续的列表项会以此值为基础递增。比如：
<ol>
<li>冠军</li>
<li>亚军</li>
<li value="4">第4名</li>
<li>第5名</li>
</ol>HTML li 摘要
| 属于 | HTML 列表 |
|---|---|
| 使用频率 | 高 |
| 兼容性 | 查看 |
| 官方文档 | 查看 |
| MDN | 查看 |
HTML li 示例
接下来，我们通过几个简单的例子来讲解一下 HTML li 标签是如何使用的。
示例 1：li 标签用于有序列表
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<ol>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>Vue</li>
<li>React</li>
</ol>
</body>
</html>页面效果如下图所示。
示例 2：li 标签用于无序列表
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>Vue</li>
<li>React</li>
</ul>
</body>
</html>页面效果如下图所示。
示例 3：li 标签用于嵌套列表
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<ul>
<li>前端：
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</li>
<li>后端：
<ul>
<li>Go</li>
<li>Java</li>
<li>Node.js</li>
</ul>
</li>
</ul>
</body>
</html>页面效果如下图所示。
提示: 如果想要修改列表项前面的 “小圆点” 或 “数字”，我们可以使用 CSS 的 list-style-type 属性。比如，使用 list-style-type: none; 可以去掉列表项符号。
