在HTML中绘制矩形主要有三种方法，最常用的是使用`标签配合CSS样式，通过设置宽高和边框属性来创建矩形，，也可以使用`标签直接生成水平矩形线，或使用`标签引用图片文件，第一种方法最为灵活，能自由控制矩形的大小和样式。
HTML怎么打矩形？三种常用方法详解，新手也能轻松上手
在网页开发中,我们经常需要通过HTML来绘制一些简单的图形，比如矩形，HTML本身主要负责网页的结构，而矩形的样式（如颜色、边框、大小）通常是通过CSS（层叠样式表）来实现的。
下面我为大家介绍三种最常用、最简单的方法来在HTML中“打”出矩形。
使用 CSS 边框（最常用的方法）
这是最直观的方式,通过设置一个元素的 border（边框）属性，我们就能看到一个矩形框。
核心代码：
<div style="width: 200px; height: 100px; border: 2px solid red;"> </div>
代码解析：
width: 200px;：设置矩形的宽度为200像素。height: 100px;：设置矩形的高度为100像素。border: 2px solid red;：设置边框的样式。2px是边框的粗细。solid是边框的实线样式。red是边框的颜色。
使用 CSS 背景色（填充矩形）
如果你不需要边框,只想画一个纯色填充的矩形，可以使用 background-color 属性。
核心代码：
<div style="width: 200px; height: 100px; background-color: blue;"> </div>
代码解析：
background-color: blue;：将矩形的背景设置为蓝色。- 注意：必须同时设置
width和height，否则矩形在页面上是不可见的（因为默认宽度为0）。
结合边框和背景（美观矩形）
在实际开发中,我们通常会结合使用边框和背景色，让矩形看起来更美观。
核心代码：
<div style="width: 200px; height: 100px; border: 2px solid #333; background-color: #f0f0f0;"> </div>
代码解析：
border: 2px solid #333;：使用深灰色边框。background-color: #f0f0f0;：使用浅灰色背景。
进阶小技巧：
如果你想画一个圆角矩形,可以在边框属性中加入 border-radius：
<div style="width: 200px; height: 100px; border: 2px solid red; border-radius: 10px;"> </div>
HTML怎么打矩形？核心就是使用一个 <div> 标签，配合 CSS 的 width、height 以及 border 或 background-color 属性即可轻松实现。
