HTML中的点图标

HTML中的点图标经常被用来表示列表中的项目。它可以用于有序列表和无序列表中。

无序列表点图标

在无序列表中，点图标可以通过在<ul>标签中使用<li>标签来创建。默认情况下，点图标是一个圆点。

<ul>
  <li>第一项</li>
  <li>第二项</li>
  <li>第三项</li>
</ul>

• 第一项
• 第二项
• 第三项

如果您想使用不同的点图标，可以使用 CSS 的 list-style-type 属性，如下所示：

<ul style="list-style-type: square;">
  <li>第一项</li>
  <li>第二项</li>
  <li>第三项</li>
</ul>

• 第一项
• 第二项
• 第三项

有序列表点图标

在有序列表中，点图标可以通过在<ol>标签中使用<li>标签来创建。默认情况下，点图标是数字。

<ol>
  <li>第一项</li>
  <li>第二项</li>
  <li>第三项</li>
</ol>

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

如果您想使用不同的点图标，可以使用 CSS 的 list-style-type 属性，如下所示：

<ol style="list-style-type: roman;">
  <li>第一项</li>
  <li>第二项</li>
  <li>第三项</li>
</ol>

I. 第一项 II. 第二项 III. 第三项

自定义点图标

如果您希望使用自定义的点图标，可以使用 CSS 的 list-style-image 属性。该属性取一个 URL，指向自定义图像。例如，以下 CSS 将使用dot.png文件作为点图标：

ul {
  list-style-image: url("dot.png");
}

<ul>
  <li>第一项</li>
  <li>第二项</li>
  <li>第三项</li>
</ul>

请注意，这种方法只适用于无序列表。在有序列表中使用自定义图像的方法更加复杂。

小结

无论是无序列表还是有序列表，HTML中的点图标在设计网页时都是十分常见的。您可以使用默认的圆点图标，也可以使用 CSS 创建自定义的点图标。