kbd标签专用于标记用户需按下的物理按键或组合，如“Esc”“Ctrl+S”，必须拆分组合键、用符号分隔，配合CSS模拟按键质感，并与其他语义标签严格区分。
什么时候该用 kbd 来表达操作动作
只有当文字明确指向「用户手指需按下某个物理按键或组合」时， 才是正确选择：
- 帮助文档里写“按 Esc 关闭弹窗”——✅ 用户真要碰键盘
- 编辑器提示“保存用 Ctrl+S”——✅ 修饰键+主键，分写才准确
- 教程中说“先输 git，再按 Tab 补全”——✅ 按键序列，用空格或箭头分隔
- 但写“调用 fetch() 方法”——❌ 这是代码，该用
fetch() - 或“点击 提交 按钮”——❌ 鼠标动作，不用 kbd
组合键必须拆开写，符号放外面
浏览器和读屏器依赖结构识别按键逻辑。把加号塞进标签里会破坏语义：
- 错误：Ctrl+S → 可能被读作“C T R plus S”
- 正确：Ctrl+S → 明确两个独立按键，+ 是视觉分隔符
- 跨平台提示：Cmd/Ctrl+R —— 斜杠在外，系统差异一目了然
- 多键同时按下：CtrlAltDel（无符号，表示并行）
默认样式不够用，必须加 CSS 重置
原生 只改字体，不改外观，容易被忽略。至少要保证四点：
- 设为 inline-block，方便加内边距和边框
- 用 等宽字体（如
ui-monospace, monospace），保持键位感 - 加浅灰背景 + 细边框 + 圆角，模拟真实按键质感
- 避免纯色填充，保留可访问性对比度（文字与背景亮度差 ≥ 4.5:1）
别混淆其他语义标签的分工
同一段技术文档里，不同内容要用对标签，否则读屏器会读错、SEO 会降权：
- Enter —— 用户要按的键
-
console.log()—— 要写的代码 - TypeError: undefined is not a function —— 终端报错输出
- username —— 可变内容占位符
