在HTML中，ul和li标签是构建无序列表和有序列表的基本工具。通过合理使用这些标签，你可以轻松地创建出结构清晰、易于阅读的网页列表。下面，我将详细介绍如何使用ul和li标签，并给出一些实用的例子。
ul和li标签的基本用法
无序列表（ul）
ul标签代表“unordered list”，用于创建无序列表。在ul标签内部，你可以使用多个li标签来定义列表项。
<ul>
<li>苹果</li>
<li>香蕉</li>
<li>橙子</li>
</ul>
这段代码将生成一个包含三个列表项的无序列表。
有序列表（ol）
ol标签代表“ordered list”，用于创建有序列表。与无序列表类似，ol标签内部也使用li标签来定义列表项。
<ol>
<li>第一步</li>
<li>第二步</li>
<li>第三步</li>
</ol>
这段代码将生成一个包含三个列表项的有序列表。
ul和li标签的属性
type属性
type属性用于指定列表项的标记类型。对于无序列表，type属性可以取以下值：
disc：默认值，使用实心圆点作为标记。circle：使用空心圆点作为标记。square：使用实心方块作为标记。
对于有序列表，type属性可以取以下值：
1：使用数字1、2、3…作为标记。A：使用大写字母A、B、C…作为标记。a：使用小写字母a、b、c…作为标记。I：使用大写罗马数字I、II、III…作为标记。i：使用小写罗马数字i、ii、iii…作为标记。
例如，以下代码将创建一个使用大写字母作为标记的无序列表：
<ul type="A">
<li>苹果</li>
<li>香蕉</li>
<li>橙子</li>
</ul>
start属性
start属性用于指定有序列表的起始数字。默认情况下，有序列表的起始数字为1。例如，以下代码将创建一个从10开始的有序列表：
<ol start="10">
<li>第一步</li>
<li>第二步</li>
<li>第三步</li>
</ol>
实用例子
以下是一个结合了无序列表和有序列表的例子：
<!DOCTYPE html>
<html>
<head>
<title>ul和li标签示例</title>
</head>
<body>
<h1>购物清单</h1>
<ul>
<li>水果：
<ul>
<li>苹果</li>
<li>香蕉</li>
<li>橙子</li>
</ul>
</li>
<li>蔬菜：
<ul>
<li>西红柿</li>
<li>黄瓜</li>
<li>茄子</li>
</ul>
</li>
</ul>
<h2>烹饪步骤</h2>
<ol start="5">
<li>将水果和蔬菜洗净</li>
<li>将水果和蔬菜切块</li>
<li>将水果和蔬菜放入锅中</li>
<li>加入适量的水</li>
<li>煮沸后，即可享用美味的水果蔬菜汤</li>
</ol>
</body>
</html>
在这个例子中，我们首先创建了一个包含两个子列表的无序列表，用于展示购物清单。然后，我们创建了一个有序列表，用于展示烹饪步骤。
通过学习和使用ul和li标签，你可以轻松地创建出各种类型的网页列表，让你的网页内容更加清晰、有序。