如何在 HTML 中制作正方形

在 HTML 中制作正方形的方法有很多种，本文将介绍三种常用的方法。

第一种方法：使用 div 标签和 CSS 样式

我们可以使用 div 标签来创建一个带有固定宽度和高度的方块，并使用 CSS 样式让它成为正方形。

<div class="square"></div>

.square {
  width: 100px;
  height: 100px;
  background-color: blue;
  border-radius: 0;
}

解释：

• 使用 div 标签创建一个宽高都为 100px 的方块；
• 使用 CSS 样式来设置它的背景色和边框的圆角为 0，使它变成一个正方形。

第二种方法：使用 SVG 图形

SVG（Scalable Vector Graphics）是一种基于 XML 的标准矢量图形格式，我们可以使用它创建正方形。

<svg width="100" height="100">
  <rect width="100" height="100" style="fill:blue" />
</svg>

解释：

• 使用 SVG 标签创建一个宽高都为 100px 的正方形；
• 使用 rect 标签创建一个矩形，并设置它的宽度、高度和颜色。

第三种方法：使用 Canvas 画布

Canvas 画布是 HTML5 新增的标签，我们也可以使用它绘制正方形。

<canvas id="square" width="100" height="100"></canvas>

var canvas = document.getElementById("square");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "blue";
ctx.fillRect(0, 0, 100, 100);

解释：

• 使用 canvas 标签创建一个宽高都为 100px 的画布；
• 使用 JavaScript 创建一个 2D 绘图上下文，并使用 fillRect() 方法绘制一个矩形。

以上三种方法都可以制作正方形，具体选择哪种方法可以根据需求和个人喜好来确定。