当前位置：首页 > 前端开发 > 正文

html怎么打勾？代码符号全解析

admin
前端开发
2025-06-18
2878

在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怎么打勾？代码符号全解析第1张

&#10003;  <!--  -->
&#10004;  <!--  -->
&#x2705;  <!--  -->

适用场景：

当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>