html5小圆点如何实现

在网页设计中，小圆点作为一种常见的装饰元素，可以用于表示导航、选项卡、分割线等，HTML5提供了一些内置的标签和属性，可以帮助我们轻松地实现小圆点的效果，本文将详细介绍如何使用HTML5实现小圆点的方法。

（图片来源网络，侵删）

1、使用<div>和<span>标签创建小圆点

我们需要创建一个包含小圆点的容器，可以使用<div>标签来实现，在容器内部，我们可以使用<span>标签来创建小圆点，为了实现小圆点的效果，我们需要为<span>标签添加一些样式，如宽度、高度、边框半径等。

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF8">
    <meta name="viewport" content="width=devicewidth, initialscale=1.0">
    <title>小圆点示例</title>
    <style>
        .dotcontainer {
            display: flex;
            justifycontent: center;
            alignitems: center;
            height: 100px;
            backgroundcolor: #f5f5f5;
        }
        .dot {
            width: 10px;
            height: 10px;
            borderradius: 50%;
            backgroundcolor: #333;
            margin: 0 5px;
        }
    </style>
</head>
<body>
    <div class="dotcontainer">
        <span class="dot"></span>
        <span class="dot"></span>
        <span class="dot"></span>
    </div>
</body>
</html>

2、使用CSS伪元素创建小圆点

除了使用<div>和<span>标签创建小圆点外，我们还可以使用CSS伪元素（如::before和::after）来实现，这种方法可以让我们在不增加HTML结构的情况下，轻松地为元素添加小圆点。

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF8">
    <meta name="viewport" content="width=devicewidth, initialscale=1.0">
    <title>小圆点示例</title>
    <style>
        .dotcontainer {
            display: flex;
            justifycontent: center;
            alignitems: center;
            height: 100px;
            backgroundcolor: #f5f5f5;
        }
        .dotcontainer::before,
        .dotcontainer::after {
            content: "";
            display: inlineblock;
            width: 10px;
            height: 10px;
            borderradius: 50%;
            backgroundcolor: #333;
            margin: 0 5px;
        }
    </style>
</head>
<body>
    <div class="dotcontainer"></div>
</body>
</html>

3、使用SVG创建小圆点

SVG（可缩放矢量图形）是一种基于XML的矢量图像格式，可以在不失真的情况下放大或缩小，使用SVG可以轻松地创建各种形状，包括小圆点，我们可以将SVG代码嵌入到HTML中，或者将其保存为单独的文件并在HTML中引用。

示例代码：

内嵌SVG代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF8">
    <meta name="viewport" content="width=devicewidth, initialscale=1.0">
    <title>小圆点示例</title>
</head>
<body>
    <svg width="10" height="10">
        <circle cx="5" cy="5" r="4" fill="#333" />
    </svg>
</body>
</html>

引用外部SVG文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF8">
    <meta name="viewport" content="width=devicewidth, initialscale=1.0">
    <title>小圆点示例</title>
</head>
<body>
    <svg class="dot" width="10" height="10">
        <circle cx="5" cy="5" r="4" fill="#333" />
    </svg>
    <!重复上述代码以创建更多小圆点 >
</body>
</html>

在外部CSS文件中添加样式：