kbd标签的核心价值是语义化表达“用户需主动按下的物理按键”，必须单独包裹每个键、用纯文本分隔组合键、不用于命令或输出，并需配合aria-keyshortcuts和css实现可访问性。
标签的核心价值在于语义化表达“用户需主动按下的物理按键”，不是装饰，也不是代码容器，而是向浏览器、辅助技术与开发者明确传递「这是击键动作」这一意图。
它告诉屏幕阅读器：“这不是普通文字，是键盘操作”，从而让视障用户能准确理解操作路径，比如听到“Control plus C”而非“kay bee dee c”。
用对 kbd 的三个关键点
每个独立按键必须单独包裹：
✅<kbd>Ctrl</kbd> + <kbd>C</kbd>
❌<kbd>Ctrl+C</kbd>（语义坍缩，读屏器误读为单个键名）组合键之间用纯文本符号分隔（推荐
+或/），不能嵌套：
✅<kbd>Cmd</kbd> / <kbd>Ctrl</kbd> + <kbd>R</kbd>
❌<kbd><kbd>Cmd</kbd>+<kbd>R</kbd></kbd>（HTML 非法嵌套，验证失败）不用于命令、输出或函数名：
✅<kbd>Enter</kbd>（真实按键）
❌<kbd>git push</kbd>（这是命令，该用<code>）
❌<kbd>Hello World</kbd>（这不是击键，是内容）
语义不等于样式，但需配合可访问设计
浏览器默认只给 <kbd></kbd> 加等宽字体，视觉区分度弱。要真正起作用，需：
- 添加
aria-keyshortcuts属性说明交互意图（如<button aria-keyshortcuts="Ctrl+S">保存</button>） - 用 CSS 明确视觉反馈（背景色、边框、圆角），同时保障高对比度模式可用
- 避免仅靠颜色传达信息，辅以形状或文字提示（如 macOS 下用
⌘替代Cmd，需额外说明）
常见场景的语义选择对照
- 用户按下快捷键：用
<kbd></kbd> - 终端里输入的命令：用
<code> - 程序运行后的输出：用
<samp></samp> - 键盘设备名称或品牌：用普通
<span></span>或直接文本
语义清晰了，机器能懂，人也看得明白。
