HTML li 标签 - HTML

HTML li 标签用于定义无序列表 (无序列表不按照项目的顺序排序)和有序列表 (有序列表按照项目的顺序排序)中的项目。

一、无序列表

无序列表使用 <ul> 标签，每个项目使用 <li> 标签。

语法：

<ul>
  <li>项目 1</li>
  <li>项目 2</li>
  <li>项目 3</li>
</ul>

例如：

• 苹果
• 香蕉
• 橘子

二、有序列表

有序列表使用 <ol> 标签，每个项目使用 <li> 标签。

语法：

<ol>
  <li>项目 1</li>
  <li>项目 2</li>
  <li>项目 3</li>
</ol>

例如：

1. 第一章
2. 第二章
3. 第三章

三、列表的类型

可以使用 type 属性指定列表的类型：

• 无序列表：
  • circle：空心圆
  • square：空心正方形
  • disc：实心圆
• 有序列表：
  • 1、2、3、……（阿拉伯数字，缺省值）
  • A、B、C、……（大写字母）
  • a、b、c、……（小写字母）
  • I、II、III、……（大写罗马数字）
  • i、ii、iii、……（小写罗马数字）

语法：

<ul type="circle">
  <li>项目 1</li>
  <li>项目 2</li>
  <li>项目 3</li>
</ul>

<ol type="A">
  <li>项目 1</li>
  <li>项目 2</li>
  <li>项目 3</li>
</ol>

四、嵌套列表

列表可以相互嵌套。嵌套的列表必须缩进。例如：

<ul>
  <li>水果：</li>
  <ul>
    <li>香蕉</li>
    <li>苹果</li>
    <li>橘子：</li>
    <ul>
      <li>橙子</li>
      <li>柚子</li>
    </ul>
  </ul>
  <li>蔬菜：</li>
  <ul>
    <li>西红柿</li>
    <li>黄瓜</li>
  </ul>
</ul>

效果如下：

• 水果：
• 香蕉
• 苹果
• 橘子：
• 橙子
• 柚子
• 蔬菜：
• 西红柿
• 黄瓜

五、总结

HTML li 标签是定义无序列表和有序列表中的项目的标签，可以通过列表的类型属性来设置不同类型的符号，可以嵌套使用，从而创建更复杂的列表结构。了解和掌握 HTML li 标签是学习网页制作的基础，必须熟练掌握。