在HTML中创建小方格通常使用<div>标签来实现。<div>标签是一个块级元素，可以容纳其他HTML元素，如文本、图片、链接等，要创建小方格，可以使用CSS样式来设置其大小、边框、颜色等属性，下面是一个简单的示例，展示如何使用HTML和CSS创建一个带有小方格的页面。
1、创建一个HTML文件，使用<!DOCTYPE html>声明文档类型，然后添加<html>、<head>和<body>标签来构建基本结构。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>小方格示例</title>
<style>
/* 在这里添加CSS样式 */
</style>
</head>
<body>
<!-- 页面内容将在这里添加 -->
</body>
</html>
2、在<head>标签内的<style>标签中添加CSS样式，定义一个小方格的样式，创建一个类名为.square的样式，设置宽度、高度、边框、颜色等属性。
.square {
width: 50px;
height: 50px;
background-color: #3498db;
border: 1px solid #2980b9;
display: inline-block;
margin: 10px;
}
3、在<body>标签内使用<div>标签创建多个小方格，并应用.square类。
<div class="square"></div> <div class="square"></div> <div class="square"></div>
4、保存HTML文件并在浏览器中打开，你将看到一个包含三个小方格的页面。
常见问题与解答：
Q1: 如何更改小方格的颜色和边框样式？
A1: 通过修改.square类的CSS样式属性，可以轻松更改小方格的颜色和边框样式，要更改背景颜色为红色，将background-color属性设置为#e74c3c。
Q2: 如何创建不同大小的小方格？
A2: 通过为每个<div>元素设置不同的类或内联样式，可以创建不同大小的小方格，为一个方格添加类.small-square并设置较小的宽度和高度。
.small-square {
width: 30px;
height: 30px;
}
Q3: 如何使小方格自动排列成多行？
A3: 可以使用CSS的display: flex;属性将包含方格的容器设置为Flexbox布局，这样，当方格数量超过一行时，它们将自动换行显示。
.container {
display: flex;
flex-wrap: wrap;
}
将所有方格放入一个带有container类的<div>中：
<div class="container">
<div class="square"></div>
<div class="square"></div>
<!-- 更多方格 -->
</div>