kbd是语义化内联标签，专指用户需按下的物理按键或组合键，须用+分隔、禁用嵌套；非样式工具，不触发事件，不可替代input或JavaScript监听。
kbd 标签的语义和基本用法
kbd 是 HTML 的语义化内联标签，专用于表示用户应输入的键盘内容（比如按键、组合键或命令），不是装饰性样式工具。浏览器默认会用等宽字体加轻微阴影渲染，但样式可覆盖——关键是它传达“这是人要按的键”，而非“看起来像按键”。
- 必须包裹纯文本输入内容，不能嵌套
、<samp> 或交互元素 </samp> - 多个独立按键应分别用
kbd包裹，例如Ctrl+Shift+Esc，而不是塞进一个kbd里 - 组合键之间建议用
+连接，并放在同一行，避免被屏幕阅读器误读为多个独立操作
<p>按 <kbd>Ctrl</kbd>+<kbd>Alt</kbd>+<kbd>Del</kbd> 重启系统</p>
常见误用：什么时候不该用 kbd
kbd 不适用于以下场景，强行使用反而损害可访问性和语义准确性：
- 命令行中执行的命令本身（如
git commit）→ 应用code标签 - 程序输出结果（如终端回显的
Done.）→ 应用samp标签 - 键盘物理结构或品牌名（如 “Logitech G915”）→ 用普通文本或
span - 按键图示或 SVG 按钮 → 属于 UI 表现层，与语义无关，不应混用
kbd
错误示例：
<p>运行 <kbd>npm install</kbd> 安装依赖</p>
正确写法：
<p>运行 <code>npm install</code> 安装依赖</p>
配合 CSS 微调视觉效果的注意事项
默认样式在不同浏览器中略有差异（如 Chrome 加灰色背景，Firefox 无背景），若需统一外观，推荐只重置必要属性：
- 保留
font-family: ui-monospace, monospace，确保等宽可读 - 背景色建议用浅灰（如
#f4f4f4），避免高对比度干扰正文流 - 边框用
1px solid #ccc即可，太粗会显得像按钮 -
不要设置
display: inline-block或固定padding，否则可能破坏行高对齐，尤其在段落中混排时
kbd { background-color: #f4f4f4; border: 1px solid #ccc; padding: 2px 4px; }无障碍支持要点：屏幕阅读器怎么读 kbd
kbd 本身不带 ARIA 属性，但多数现代屏幕阅读器（NVDA、VoiceOver）会将其识别为“keyboard input”，并自动略过连字符或加号——前提是结构干净：
立即学习“前端免费学习笔记（深入）”；
- ✅ 正确：
<kbd>Ctrl</kbd>+<kbd>S</kbd>→ 读作 “Control S” - ❌ 错误：
<kbd>Ctrl+S</kbd>→ 可能读成 “Control plus S” 或吞掉加号 - 若需强调“同时按下”，可在文案中补充说明（如“同时按住”），
kbd标签本身不表达时序
复杂组合（如 macOS 的 Cmd + Option + Esc）建议拆开写，并确保父容器有足够上下文，比如：
<p>强制退出应用：<kbd>Cmd</kbd>+<kbd>Option</kbd>+<kbd>Esc</kbd></p>
键盘符号（如 ⌘、⌥）虽直观，但非 Unicode 标准键盘字符，且无语义，不建议替代 kbd 文本内容；如必须使用，应配合 aria-label 补充说明。
实际项目里最容易被忽略的是组合键的拆分粒度——写成一个 kbd 看着省事，但一上线就被测试同学揪出朗读异常。
