<kbd>: 键盘输入元素

基线广泛可用

此功能已经成熟，可以在许多设备和浏览器版本中使用。它自 2015 年 7 月.

<kbd> HTML 元素表示一段内联文本，表示键盘、语音输入或任何其他文本输入设备的文本用户输入。按照惯例，用户代理默认使用其默认的等宽字体呈现 <kbd> 元素的内容，尽管这不是 HTML 标准强制执行的。

尝试一下

<kbd> 可以与 <samp>（样本输出）元素以各种组合嵌套，以表示基于视觉提示的各种输入或输出形式。

属性

此元素仅包含全局属性。

使用说明

其他元素可以与 <kbd> 一起使用以表示更具体的场景。

将 <kbd> 元素嵌套在另一个 <kbd> 元素内表示作为较大输入的一部分的实际键或其他输入单元。请参阅下面的在输入中表示击键。
将 <kbd> 元素嵌套在 <samp> 元素内表示系统回显给用户的输入。请参阅下面的回显输入示例。
另一方面，将 <samp> 元素嵌套在 <kbd> 元素内表示基于系统呈现的文本的输入，例如菜单和菜单项的名称，或屏幕上显示的按钮的名称。请参阅下面表示屏幕上的输入选项下的示例。

注意：您可以定义自定义样式以覆盖浏览器对 <kbd> 元素的默认字体选择，尽管用户的偏好可能会覆盖您的 CSS。

示例

基本示例

html

<p>
  Use the command <kbd>help mycommand</kbd> to view documentation for the
  command "mycommand".
</p>

结果

在输入中表示击键

要描述由多个击键组成的输入，您可以嵌套多个 <kbd> 元素，其中外部 <kbd> 元素表示整体输入，每个单独的击键或输入组件都包含在其自己的 <kbd> 内。

未设置样式

首先，让我们看看这仅仅作为纯 HTML 是什么样子。

HTML

html

<p>
  You can also create a new document using the
  <kbd><kbd>Ctrl</kbd>+<kbd>N</kbd></kbd> keyboard shortcut.
</p>

这将整个按键序列包装在外部 <kbd> 元素中，然后将每个单独的键包装在其自身内，以表示序列的组件。

注意：您无需执行所有这些包装；您可以选择通过省略外部 <kbd> 元素来简化它。换句话说，将其简化为 <kbd>Ctrl</kbd>+<kbd>N</kbd> 将是完全有效的。

但是，根据您的样式表，您可能会发现这种嵌套很有用。

结果

没有应用样式表时，输出看起来像这样

使用自定义样式

我们可以通过添加一些 CSS 来更清楚地了解这一点

CSS

我们为嵌套的 <kbd> 元素添加了一个新的选择器，kbd>kbd，我们可以在渲染键盘键时应用它

css

kbd > kbd {
  border-radius: 3px;
  padding: 1px 2px 0;
  border: 1px solid black;
}

HTML

然后我们将 HTML 更新为在输出中使用此类在将要呈现的键上

html

<p>
  You can also create a new document by pressing the
  <kbd><kbd>Ctrl</kbd>+<kbd>N</kbd></kbd> shortcut.
</p>

结果

结果正是我们想要的！

回显输入

将 <kbd> 元素嵌套在 <samp> 元素内表示系统回显给用户的输入。

html

<p>
  If a syntax error occurs, the tool will output the initial command you typed
  for your review:
</p>
<blockquote>
  <samp><kbd>custom-git ad my-new-file.cpp</kbd></samp>
</blockquote>

结果

表示屏幕上的输入选项

将 <samp> 元素嵌套在 <kbd> 元素内表示基于系统呈现的文本的输入，例如菜单和菜单项的名称，或屏幕上显示的按钮的名称。

例如，您可以解释如何使用看起来像这样的 HTML 在“文件”菜单中选择“新建文档”选项

html

<p>
  To create a new file, choose the <kbd><kbd><samp>File</samp></kbd>
  ⇒<kbd><samp>New Document</samp></kbd></kbd> menu option.
</p>

<p>
  Don't forget to click the <kbd><samp>OK</samp></kbd> button to confirm once
  you've entered the name of the new file.
</p>

这做了一些有趣的嵌套。对于菜单选项描述，整个输入都包含在 <kbd> 元素中。然后，在其中，菜单和菜单项名称都包含在 <kbd> 和 <samp> 中，表示从屏幕小部件中选择的输入。

结果

技术摘要

内容类别	流动内容，短语内容，可感知内容。
允许的内容	短语内容.
标签省略	无，起始标签和结束标签都是必需的。
允许的父级	任何接受短语内容的元素。
隐式 ARIA 角色	没有相应的角色
允许的 ARIA 角色	任何
DOM 接口	`HTMLElement`

规范

规范
HTML 标准 # the-kbd-element

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参见

<code>