<kbd>:键盘输入元素

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

¥<kbd> may be nested in various combinations with the <samp> (Sample Output) element to represent various forms of input or output based on visual cues.

¥Attributes

该元素仅包含 全局属性。

¥This element only includes the global attributes.

¥Usage notes

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

¥Other elements can be used in tandem with <kbd> to represent more specific scenarios:

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

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

¥Note: You can define a custom style to override the browser's default font selection for the <kbd> element, although the user's preferences may potentially override your CSS.

¥Examples

¥Basic example

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

结果

¥Result

¥Representing keystrokes within an input

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

¥To describe an input comprised of multiple keystrokes, you can nest multiple <kbd> elements, with an outer <kbd> element representing the overall input and each individual keystroke or component of the input enclosed within its own <kbd>.

无样式

¥Unstyled

首先，让我们看一下纯 HTML 是什么样子的。

¥First, let's look at what this looks like as just plain HTML.

HTML

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

这将整个键序列封装在外部 <kbd> 元素中，然后将每个单独的键封装在其自己的元素中，以便表示序列的组成部分。

¥This wraps the entire key sequence in an outer <kbd> element, then each individual key within its own, in order to denote the components of the sequence.

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

¥Note: You don't need to do all this wrapping; you can choose to simplify it by leaving out the external <kbd> element. In other words, simplifying this to just <kbd>Ctrl</kbd>+<kbd>N</kbd> would be perfectly valid.

注意：不过，根据你的样式表，你可能会发现进行这种嵌套很有用。

¥Note: Depending on your style sheet, though, you may find it useful to do this kind of nesting.

结果

¥Result

未应用样式表的输出如下所示：

¥The output looks like this without a style sheet applied:

具有自定义样式

¥With custom styles

我们可以通过添加一些 CSS 来更理解这一点：

¥We can make more sense of this by adding some CSS:

CSS

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

¥We add a new selector for nested <kbd> elements, kbd>kbd, which we can apply when rendering keyboard keys:

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

HTML

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

¥Then we update the HTML to use this class on the keys in the output to be presented:

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

结果

¥Result

结果正是我们想要的！

¥The result is just what we want!

¥Echoed input

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

¥Nesting a <kbd> element inside a <samp> element represents input that has been echoed back to the user by the system.

<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>

结果

¥Result

¥Representing onscreen input options

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

¥Nesting a <samp> element inside a <kbd> element represents input which is based on text presented by the system, such as the names of menus and menu items, or the names of buttons displayed on the screen.

例如，你可以使用如下 HTML 来解释如何在 "文件" 菜单中选择 "新文件" 选项：

¥For example, you can explain how to choose the "New Document" option in the "File" menu using HTML that looks like this:

<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> 中，指示从屏幕小部件中选择的输入。

¥This does some interesting nesting. For the menu option description, the entire input is enclosed in a <kbd> element. Then, inside that, both the menu and menu item names are contained within both <kbd> and <samp>, indicating an input which is selected from a screen widget.

结果

¥Result

¥Technical summary

¥See also

• <code>