可在HTML5中用Emoji字符或SVG添加小人：Emoji简单快捷，支持font-size调整；SVG可定制形状、颜色与动画，并能封装复用；CSS伪元素法仅用样式生成极简小人。
如果您希望在HTML5页面中添加小人形象，可以通过直接使用Emoji字符或嵌入SVG代码两种主流方式实现。以下是具体操作步骤：
一、使用Emoji字符插入小人形象
Emoji是Unicode标准中的图形字符，浏览器原生支持，无需额外资源加载，适合快速添加简洁的小人图标。不同系统对Emoji渲染效果略有差异，建议优先选用通用性强的字符。
1、在HTML文件的
内任意位置，直接输入Unicode小人Emoji，例如：??（技术人员）、??（艺术家）、??（宇航员）或基础单色小人?。2、若需控制大小，使用CSS设置font-size属性，例如：?。
立即学习“前端免费学习笔记（深入）”；
3、为确保兼容性，避免使用过新的Emoji（如2023年后新增的变体），可查阅Unicode Emoji列表选择v14.0及之前版本收录的字符。
二、用内联SVG绘制定制化小人
SVG是矢量图形格式，支持精确控制形状、颜色、动画和响应式缩放，适合需要统一风格、适配深色模式或添加交互的小人形象。
1、在HTML中插入svg>标签，设置width与height属性，例如：。
2、在
3、添加矩形作为身体：
4、添加线条模拟手臂和腿：
三、复用SVG小人作为独立组件
将SVG代码封装为自定义元素或通过
1、在HTML顶部
2、在需要显示小人的位置插入：。
3、为该SVG添加CSS类以统一控制尺寸与颜色，例如：.icon { width: 32px; height: 32px; }，并用fill属性覆盖内部颜色值。
四、使用CSS伪元素组合简易小人
仅依赖HTML标签与CSS，不引入外部资源或复杂SVG，适用于极简场景或动态生成需求。
1、创建一个空标签并赋予class，例如：。
2、在CSS中定义该class：设置宽高、border-radius制作圆形头，::before和::after生成身体与四肢，例如：.mini-person { display: inline-block; position: relative; width: 12px; height: 12px; border-radius: 50%; background: #3498db; }。
3、添加::before伪元素表示身体：.mini-person::before { content: ''; position: absolute; top: 12px; left: 50%; transform: translateX(-50%); width: 2px; height: 16px; background: #3498db; }。
