<kbd>-键盘输入

<kbd> 是 HTML 中用于表示键盘输入的标签，通常用于文档或教程中展示用户需要按下的按键或组合键。它默认会以等宽字体渲染，并可能带有额外的样式（如边框或背景色），以区别于普通文本。

<kbd> 的基本用法

<kbd> 标签的典型用途是标记键盘上的单个按键或组合键。浏览器默认会将其渲染为等宽字体，部分浏览器还会添加浅灰色背景或边框。例如：

<p>保存文件请按 <kbd>Ctrl</kbd> + <kbd>S</kbd>。</p>

渲染效果：

保存文件请按 <kbd>Ctrl</kbd> + <kbd>S</kbd>。

嵌套 <kbd> 表示组合键

当需要表示组合键时，可以将多个 <kbd> 标签并列使用，或用嵌套方式表示层级关系。例如：

<!-- 并列写法 -->
<p>复制文本按 <kbd>Ctrl</kbd> + <kbd>C</kbd></p>

<!-- 嵌套写法 -->
<p>Mac 截图按 <kbd><kbd>Command</kbd> + <kbd>Shift</kbd> + <kbd>4</kbd></kbd></p>

渲染效果：

复制文本按 <kbd>Ctrl</kbd> + <kbd>C</kbd>
Mac 截图按 <kbd><kbd>Command</kbd> + <kbd>Shift</kbd> + <kbd>4</kbd></kbd>

与其他语义化标签结合

<kbd> 常与 <code> 或 <samp> 标签配合使用，区分键盘输入、代码和程序输出：

<p>在终端输入 <kbd>git status</kbd> 后，可能看到：</p>
<samp>
  On branch main<br>
  Your branch is up to date with 'origin/main'.
</samp>

渲染效果：

在终端输入 <kbd>git status</kbd> 后，可能看到：
<samp> On branch main<br> Your branch is up to date with 'origin/main'. </samp>

样式自定义

虽然浏览器有默认样式，但可以通过 CSS 完全自定义外观。以下是一个增强样式的例子：

<style>
  kbd {
    padding: 2px 6px;
    border: 1px solid #ccc;
    background: linear-gradient(#f9f9f9, #e0e0e0);
    border-radius: 4px;
    box-shadow: 0 1px 1px rgba(0,0,0,0.2);
    font-family: monospace;
  }
  kbd kbd { /* 嵌套时的样式 */
    padding: 1px 4px;
    box-shadow: none;
  }
</style>

<p>重启快捷键 <kbd><kbd>Alt</kbd> + <kbd>F2</kbd></kbd></p>

渲染效果（需实际运行查看）：

重启快捷键 <kbd><kbd>Alt</kbd> + <kbd>F2</kbd></kbd>

复杂场景示例

表示菜单操作路径

<p>
  导出文件路径：
  <kbd>文件</kbd> → <kbd>导出</kbd> → <kbd>PDF</kbd>
</p>

渲染效果：

导出文件路径：
<kbd>文件</kbd> → <kbd>导出</kbd> → <kbd>PDF</kbd>

游戏控制说明

<div class="game-controls">
  <p>移动: <kbd>W</kbd> <kbd>A</kbd> <kbd>S</kbd> <kbd>D</kbd></p>
  <p>攻击: <kbd>空格</kbd></p>
  <p>技能: <kbd>Q</kbd> <kbd>E</kbd> <kbd>R</kbd></p>
</div>

无障碍访问建议

为提升可访问性，建议为 <kbd> 添加 aria-label：

<kbd aria-label="Control key">Ctrl</kbd>

屏幕阅读器会明确读出这是键盘按键。

与其他技术的联动示例

动态高亮按键

通过 JavaScript 实现按键高亮反馈：

<script>
  document.addEventListener('keydown', (e) => {
    const keyElement = document.getElementById(`key-${e.key.toUpperCase()}`);
    if (keyElement) keyElement.style.background = '#ff0';
  });
  document.addEventListener('keyup', (e) => {
    const keyElement = document.getElementById(`key-${e.key.toUpperCase()}`);
    if (keyElement) keyElement.style.background = '';
  });
</script>

<p>尝试按下 <kbd id="key-A">A</kbd> 或 <kbd id="key-ENTER">Enter</kbd></p>