kbd 标签语义化表示用户键盘输入，仅作内容标记不触发交互；默认等宽字体渲染，需 CSS 定制样式；支持嵌套表达组合键，须配合 aria 属性保障可访问性。
kbd 标签的作用和基本用法
kbd 是 HTML 中语义化表示“用户键盘输入”的内联标签，它本身不带任何默认样式，但浏览器通常会渲染为等宽字体（如 monospace），视觉上类似终端输入。它不是用来“触发”键盘行为，而是标记一段文本为用户应按下的键或组合键。
- 仅用于内容语义，不参与交互或事件绑定
- 不会自动加粗、变色或高亮，需靠 CSS 主动定义样式
- 嵌套使用是合法的，比如
<kbd><kbd>Ctrl</kbd>+<kbd>C</kbd></kbd>表示组合键
常见错误：把 kbd 当成快捷键提示组件
很多人误以为写 <kbd>Ctrl+S</kbd> 就能自动响应保存操作——完全不能。这个标签只是告诉阅读者“这里说的是 Ctrl+S 这个按键组合”，和 JavaScript 的 keydown 事件毫无关系。
- 错误认知：
<kbd>Esc</kbd>点击后关闭弹窗 → 实际点击无效 - 正确做法：用
<kbd>Esc</kbd>描述操作，再单独用 JS 监听keydown并判断event.key === 'Escape' - 混淆后果：文档可访问性下降（屏幕阅读器会读作“K B D，E S C”而非“Escape 键”），且无法通过键盘焦点操作
让 kbd 看起来像真实键盘按键的 CSS 写法
默认样式太朴素，容易被忽略。加几行 CSS 就能提升辨识度：
kbd {
padding: 2px 4px;
border-radius: 3px;
background-color: #f0f0f0;
border: 1px solid #ccc;
font-family: ui-monospace, monospace;
font-size: 0.9em;
}- 如果项目用了 Tailwind，可用
class="inline-flex items-center px-2 py-0.5 rounded border bg-gray-100 font-mono text-xs" - 避免用纯背景色无边框，否则在浅色背景上易丢失轮廓
- 不建议用
box-shadow模拟按压效果——这属于交互反馈，应由 JS 控制，而非静态标签承担
组合键、系统差异与可访问性注意点
不同系统对同一操作的按键不同（比如 macOS 用 Cmd，Windows 用 Ctrl），直接写死会误导用户。
立即学习“前端免费学习笔记（深入）”；
- 推荐写法：
<kbd><span aria-label="Command key">⌘</span>+S</kbd>或<kbd>Ctrl</kbd><span aria-hidden="true">+</span><kbd>S</kbd> - macOS 用户可能不认识
Ctrl图标，Windows 用户可能不熟悉⌘，所以最好配合文字说明，例如：“在 Windows 上按<kbd>Ctrl</kbd>+<kbd>S</kbd>，macOS 上按<kbd><span aria-label="Command">⌘</span></kbd>+<kbd>S</kbd>” -
aria-label和aria-hidden="true"是关键，否则屏幕阅读器会把⌘读成“复选标记”之类无关字符
实际用的时候，别只图省事堆一堆 <kbd>，得想清楚读者是谁、在哪种设备上看到它、是否真能理解那个符号。
