最稳妥的帮助按钮写法是用语义化button元素直接包含?字符，并设置aria-label明确说明上下文，同时确保可聚焦、可键盘操作；css用伪元素实现hover气泡，但移动端需js支持focus/blur/esc等交互，且必须做好焦点管理和xss过滤。
HTML里怎么写带问号的帮助按钮
直接用 ? 字符加 button 最稳妥，别用图片或伪元素模拟问号——语义不清、屏幕阅读器识别不了、缩放时易糊。核心是让按钮可聚焦、可键盘操作、有明确 role。
- 用
<button type="button" aria-label="帮助：输入邮箱格式示例">?</button>，aria-label必须写清楚上下文，不能只写“帮助” - 避免
<span>?</span>或@#@#@#@#@#@#@#@#@#@0，前者不可聚焦，后者会触发页面跳转 - CSS 里给
button设width: 24px; height: 24px;和圆角，配合font-size: 14px;让问号居中，比用 background-image 更可控
CSS实现提示气泡（tooltip）的最小可行方案
不用 JS 也能做基础气泡，靠 :hover + ::after，但仅限鼠标悬停；如果要支持键盘焦点（比如按 Tab 进入后显示），必须用 JS 控制 aria-hidden 和 display。
- 气泡内容放
data-tooltip属性里，例如：<button data-tooltip="邮箱用于重置密码，不会公开">?</button> - CSS 中用
button[data-tooltip]:hover::after生成气泡，content: attr(data-tooltip)，注意加position: relative到 button 上 - 气泡默认
opacity: 0; visibility: hidden;，hover 时改opacity: 1; visibility: visible;，加transition: opacity 0.15s防闪 - 移动端不支持 hover，所以纯 CSS 方案在手机上基本无效——这点容易被忽略
用 JavaScript 控制气泡显隐的关键逻辑
真正可用的帮助气泡，得响应 focus、blur、keydown（Esc 关闭）和点击外部关闭，否则不符合无障碍要求。
- 监听
focus事件后动态创建<div class="tooltip"> 插入到 body，并用 <code>getBoundingClientRect()定位到按钮右上方 - 绑定
document.addEventListener('click', hideOnOutsideClick)，但要注意排除气泡自身和按钮，否则点气泡会立刻消失 - 按
Esc键时调用tooltip.remove()，同时把焦点还给原按钮，不然键盘用户会丢失焦点位置 - 不要用
setTimeout延迟显示，会导致键盘用户按 Tab 后气泡延迟出现——应立即显示 - 推荐用
DOMPurify.sanitize(htmlString)处理传入内容，只允许<br>、<strong></strong>等极少数标签 - 换行用
<br>而不是\n+ white-space: pre-wrap，后者在 Safari 里对::after伪元素支持不稳定 - 如果气泡里需要链接，确保加
target="_blank" rel="noopener"，且链接文字本身要有意义（不能只写“点击这里”） - 字体大小建议设为
0.875rem，比主文本小一号，避免气泡文字喧宾夺主
气泡内容里能放 HTML 吗？安全与兼容性怎么平衡
可以，但必须严格过滤。直接 innerHTML 会 XSS，而纯 textContent 又不支持换行或链接。
