HTML5中怎么显示对号？用实体字符还是CSS绘制勾选框更合适

在HTML5页面里展示对号是常见需求，比如表单勾选、任务完成标记等。实现方式主要有使用HTML实体字符，以及用CSS绘制勾选框并展示对号两种。下面分别说明具体写法。

一、使用HTML5实体字符写对号

HTML提供了一些预定义的字符实体，可以直接在页面中渲染成对号符号。最常用的对号实体如下：

• ✓ 对应符号 ✓
• ✔ 对应符号 ✔
• ✓ 也是✓的命名实体，但部分旧浏览器支持不好

在HTML正文中，直接写入转义后的实体即可，注意不要写成未转义的标签形式。示例：

<p>订单状态：已发货 ✓</p>
<span>阅读协议 ✔</span>

这种写法优点是非常简单，不需要额外样式，屏幕阅读器也能读出符号含义。缺点是样式控制有限，难以做成带边框的勾选框。

二、用CSS画勾选框并显示对号

如果需要一个方框里面带对号，可以用div配合CSS伪元素::after来绘制。思路是用边框做方框，用两条边框旋转拼成对号。

.checkbox {
  width: 20px;
  height: 20px;
  border: 2px solid #333;
  position: relative;
  display: inline-block;
}
.checkbox::after {
  content: '';
  position: absolute;
  left: 6px;
  top: 2px;
  width: 5px;
  height: 10px;
  border: solid #2ecc71;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

对应的HTML结构只需要一个元素：

<div class="checkbox"></div>

这种CSS画法可以随意改颜色、大小和边框样式，也能加transition做打勾动画，适合自定义表单组件。

三、两种写法怎么选

总结来说，只是显示符号就用实体字符，要做成控件就用CSS。两者在HTML5里都能良好运行。

HTML5对号实体css勾选框修改时间：2026-07-29 00:57:20