HTML中的三个列表，具体的使用及列表样式

HTML有三种列表：

前言

在HTML中，列表（List）可以用来展示一组相关的信息或项目。有序列表和无序列表是HTML中两种常见的列表类型。

一、有序列表

有序列表（Ordered lists）：用数字或字母来标记列表项，每个列表项前会有一个数字或字母。

<ol>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
</ol>

二、 无序列表

无序列表（Unordered lists）：用符号来标记列表项，每个列表项前会有一个符号，常用的符号有圆点、方块和实心圆点。

<ul>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
</ul>

三、定义列表

定义列表（Definition lists）：用于定义术语或概念，每个列表项由一个术语和对应的定义组成。

<dl>
  <dt>术语1</dt>
  <dd>定义1</dd>
  <dt>术语2</dt>
  <dd>定义2</dd>
  <dt>术语3</dt>
  <dd>定义3</dd>
</dl>

这些列表都可以使用CSS样式进行美化和自定义。

四、列表样式

属性	描述
list-style:none	无标记符号,会去除前面的特殊符号，如圆点，数字等等。
list-style:circle	空心圆，将前面的特殊符号换成空心圆
list-style:square	正方形，将前面的特殊符号换成正方形
list-style:decimal	数字，将前面的特殊符号换成数字

无标记符号

去除无序的圆点，属性：style=“list-style:none”

<ul>
    <li style="list-style:none">苹果</li>
    <li>香蕉</li>
    <li style="list-style:none">葡萄</li>
</ul>

结果

空心圆

将实心圆换成空心圆，属性：style=“list-style:circle”

<ul>
    <li style="list-style:circle">苹果</li>
    <li>香蕉</li>
    <li style="list-style:circle">葡萄</li>
</ul>

结果

正方形

将实心圆换成正方形，属性：style=“list-style:square”

<ul>
        <li style="list-style:square">苹果</li>
        <li>香蕉</li>
        <li style="list-style:square">葡萄</li>
    </ul>

结果

数字

无序也可以当有序用,属性：style=“list-style:decimal”

<ul>
        <li style="list-style:decimal">苹果</li>
        <li>香蕉</li>
        <li style="list-style:decimal">葡萄</li>
    </ul>

结果

总结

HTML中的列表元素包括<ul>、<ol>、<li>和<dl>，可以用于创建无序列表、有序列表、描述性列表和嵌套列表。每个列表项都必须包含在<li>元素中，而有序列表、无序列表和描述性列表则需要分别使用<ol>、<ul>和<dl>元素来定义。