在HTML中表示对勾（√）有多种方法： ，1. 使用Unicode字符：
✓（✓）或✔（✔） ，2. 使用HTML实体：✓（✓）或✔（✔） ，3. 通过CSS创建样式化对勾 ，4. 使用图标库（如Font Awesome）的“在HTML中表示对勾（✓）符号有多种方法，每种方法适用于不同场景，以下是5种主流实现方式及详细示例：
Unicode字符（最简方法）
直接使用Unicode字符是最快捷的方式：
✓ <!-- U+2713 CHECK MARK --> ✔ <!-- U+2714 HEAVY CHECK MARK --> ✅ <!-- U+2705 WHITE HEAVY CHECK MARK -->
特点：
- 原生支持,无需额外资源
- 支持所有现代浏览器
- 可通过CSS控制样式：
.checkmark { color: #28a745; font-size: 1.5em; }
HTML实体（避免编码问题）
使用十进制或十六进制实体可解决编码冲突：
✓ <!-- ✓ --> ✔ <!-- ✔ --> ✅ <!-- ✅ -->
适用场景：
- 当HTML文件编码声明不明确时
- 在CMS编辑器中直接插入
SVG矢量图标（推荐方案）
通过SVG实现可定制矢量图形：
<svg width="24" height="24" viewBox="0 0 24 24" aria-label="已完成"> <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z" fill="currentColor"/> </svg>
优势：
- 无限缩放不失真
- 通过CSS控制颜色/动画：
svg.check { transition: transform 0.3s; color: #3cb371; /* 控制填充色 */ } svg.check:hover { transform: scale(1.2); }
CSS绘制（无依赖方案）
纯CSS创建对勾动画：
<div class="checkmark"></div>
.checkmark {
width: 30px;
height: 30px;
}
.checkmark::after {
content: "";
display: block;
width: 10px;
height: 20px;
border: solid green;
border-width: 0 3px 3px 0;
transform: rotate(45deg);
}
图标字体（如Font Awesome）
使用流行图标库：
<!-- 引入库 --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> <!-- 使用图标 --> <i class="fa-solid fa-check" aria-hidden="true"></i> <span class="sr-only">任务已完成</span>
注意：
- 添加
aria-hidden避免冗余朗读 - 配合
.sr-only文本保障可访问性
选择建议
| 方法 | 适用场景 | 优点 | 注意事项 |
|---|---|---|---|
| Unicode | 简单文本场景 | 零依赖、极简实现 | 部分字体渲染差异 |
| HTML实体 | CMS编辑器插入 | 避免编码问题 | 样式定制受限 |
| SVG | 高分辨率屏幕/动态交互 | 完全可控、动效丰富 | 需手动优化无障碍属性 |
| CSS绘制 | 无外部依赖需求 | 体积最小、性能最优 | 复杂图形实现困难 |
| 图标字体 | 项目已集成图标库 | 统一管理、海量图标 | 额外HTTP请求、FOUT问题 |
无障碍要求
无论使用哪种方式,必须保障屏幕阅读器可识别：
- 添加
aria-label或隐藏文本：<span role="img" aria-label="已完成">✓</span>
- 表单场景关联
<label>：<input type="checkbox" id="task1"> <label for="task1">✓ 任务完成</label>
浏览器兼容方案
<!-- 优雅降级示例 -->
<span class="checkmark" role="img" aria-label="已完成">
<svg width="16" height="16" style="display:inline-block;vertical-align:-2px">
<path d="M5.5 12L2 8.5l1-1 2.5 2.5 5-5 1 1z"/>
</svg>
<span style="display:none">✓</span> <!-- Unicode备用 -->
</span>
引用说明：本文技术方案参考MDN Web文档、W3C无障碍指南、Font Awesome官方文档，Unicode字符数据遵循Unicode 15.0标准。
原创文章，发布者：酷盾叔，转转请注明出处：https://www.kd.cn/ask/29330.html
