<kbd>：键盘输入元素
<kbd> HTML 元素表示一段内联文本，用于指示来自键盘、语音输入或任何其他文本输入设备的文本用户输入。传统上，用户代理默认使用其默认等宽字体渲染 <kbd> 元素的内容，尽管 HTML 标准并未强制规定这一点。
试一试
<p>
Please press <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>R</kbd> to re-render an
MDN page.
</p>
kbd {
background-color: #eeeeee;
border-radius: 3px;
border: 1px solid #b4b4b4;
box-shadow:
0 1px 1px rgb(0 0 0 / 0.2),
0 2px 0 0 rgb(255 255 255 / 0.7) inset;
color: #333333;
display: inline-block;
font-size: 0.85em;
font-weight: bold;
line-height: 1;
padding: 2px 4px;
white-space: nowrap;
}
<kbd> 可以与 <samp>（示例输出）元素以各种组合嵌套，以表示基于视觉线索的各种形式的输入或输出。
属性
此元素仅包含全局属性。
用法说明
可以与其他元素结合使用 <kbd> 来表示更具体的情况
- 将一个
<kbd>元素嵌套在另一个<kbd>元素内，表示一个实际的键或其他输入单元作为更大输入的一部分。请参阅下面的表示输入中的按键。 - 将
<kbd>元素嵌套在<samp>元素内，表示已被系统回显给用户的输入。请参阅下面的回显输入中的示例。 - 另一方面，将
<samp>元素嵌套在<kbd>元素内，表示基于系统呈现的文本的输入，例如菜单和菜单项的名称，或屏幕上显示的按钮名称。请参阅下面的表示屏幕输入选项中的示例。
注意：您可以定义自定义样式来覆盖浏览器对 <kbd> 元素的默认字体选择，尽管用户的偏好可能会覆盖您的 CSS。
示例
基本示例
<p>
Use the command <kbd>help my-command</kbd> to view documentation for the
command "my-command".
</p>
结果
表示输入中的按键
要描述包含多个按键的输入，您可以嵌套多个 <kbd> 元素，其中外部 <kbd> 元素表示整个输入，每个单独的按键或输入组件都包含在其自己的 <kbd> 中。
未样式化
首先，让我们看看这只是纯 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，我们在渲染键盘按键时可以使用它
kbd > kbd {
border-radius: 3px;
padding: 1px 2px 0;
border: 1px solid black;
}
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> 元素内，表示已被系统回显给用户的输入。
<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 来解释如何选择“文件”菜单中的“新建文档”选项
<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> 中，表示从屏幕小部件中选择的输入。
结果
技术摘要
规范
| 规范 |
|---|
| HTML # the-kbd-element |
浏览器兼容性
加载中…