HTML无法直接控制emoji肤色，因肤色变体依赖Unicode组合字符（基础emoji+U+1F3FB–U+1F3FF），需JavaScript动态拼接；直接在<select>中硬编码带肤色emoji易因字体支持不全或码点截断失效，推荐存基础emoji与修饰符再运行时组合。
HTML 本身不提供 emoji 肤色选择功能，emoji 的肤色变体是 Unicode 标准的一部分，靠组合字符（基础 emoji + U+1F3FB–U+1F3FF 肤色修饰符）实现，浏览器渲染时自动合成。你无法用纯 HTML 标签控制它——必须用 JavaScript 动态拼接或替换。
为什么 <select> 里直接写带肤色的 emoji 会失效？
常见错误是把不同肤色的 emoji 当作独立字符硬编码进 <option>，比如：
<option value="?">?</option> <option value="??">??</option> <option value="??">??</option>
问题在于：很多字体/系统对肤色修饰符支持不一致，?? 在某些环境（如旧版 Safari、Windows 7 默认字体）可能显示为空白、方块或拆成两个符号（? + ◻）。更关键的是，用户复制粘贴或后端接收时，value 是完整字符串，但语义上它不是“一个字符”，而是两个码点（\u{1F468}\u{1F3FB}），容易被截断或误处理。
推荐做法是只存基础 emoji 和选中的肤色修饰符，运行时组合：
立即学习“前端免费学习笔记（深入）”；
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 用
data-emoji-base="?"存根 emoji -
<select>只管理修饰符值：1F3FB、1F3FC… - JS 拼接：
base + String.fromCodePoint(0x1F3FB)
如何用 JS 动态生成并切换肤色 emoji？
核心是识别基础 emoji（如 ?、?、?）是否支持肤色修饰——并非所有 emoji 都支持（比如 ? 就不行）。W3C 推荐检查 Unicode 的 Emoji_Modifier_Base 属性，但前端无原生 API，实际采用白名单更可靠。
实操建议：
- 维护一个支持肤色的基础 emoji 数组：
["?", "?", "?", "?", "?", "?", "?", "?"] - 肤色修饰符统一用十六进制码点：
["1F3FB", "1F3FC", "1F3FD", "1F3FE", "1F3FF"] - 组合时用
String.fromCodePoint()，避免"\u1F3FB"这种无效转义（JS 不支持 5 位 \u） - 示例代码片段：
const base = "?"; const tone = "1F3FD"; const result = base + String.fromCodePoint(parseInt(tone, 16)); // → "??"
兼容性与输入法干扰怎么处理？
用户在 contenteditable 或 <input> 中直接输入 emoji 时，iOS/Android 输入法可能自动带上默认肤色（如 ?? 不带肤色，但 ?? 会自带），导致你 JS 控制的肤色被覆盖。这不是 bug，是平台行为。
应对方式：
- 监听
input事件，用正则检测结尾是否含肤色修饰符：/[\u{1F3FB}-\u{1F3FF}]+$/u - 若检测到，提取最后的修饰符，同步更新你的肤色选择器 UI
- 注意：不要盲目 strip 修饰符，否则会破坏像
??（职业 emoji）这类合法组合 - 测试重点放在 iOS 16+、Chrome 115+、Firefox 120+，旧版 Android WebView 渲染差异大，需降级为文字标签（如 “中等肤色”）
真正难的不是拼出 ??，而是确保它在表单提交、数据库存储、API 传输、再渲染全链路不被截断或转义——UTF-8 编码、MySQL utf8mb4、JSON 序列化都得对齐。别只盯着页面显示。
