HTML <kbd> 标签

定义和用法

<kbd> 标签用于定义键盘输入。其中的内容以浏览器默认的等宽字体显示。

提示：此标签未被弃用。但是，通过使用 CSS 可以实现更丰富的效果（请参见下面的例子）。

请参阅：

标签 描述
<code> 定义计算机程序的样例输出。
<samp> 定义键盘输入。
<var> 定义变量。
<pre> 定义预格式化文本。

另请参阅：

HTML 教程：HTML 文本格式化

HTML DOM 参考手册：Kbd 对象

实例

例子 1

在文档中定义一些文本作为键盘输入：

<p>请按 <kbd>Ctrl</kbd> + <kbd>C</kbd> 来复制文本（Windows）。</p>

<p>请按 <kbd>Cmd</kbd> + <kbd>C</kbd> 来复制文本（Mac OS）。</p>

亲自试一试

例子 2

使用 CSS 设置 <kbd> 元素的样式：

<html>
<head>
<style>
kbd {
  border-radius: 2px;
  padding: 2px;
  border: 1px solid black;
}
</style>
</head>
<body>

<p>请按 <kbd>Ctrl</kbd> + <kbd>C</kbd> 来复制文本（Windows）。</p>
<p>请按 <kbd>Cmd</kbd> + <kbd>C</kbd> 来复制文本（Mac OS）。</p>

</body>
</html>

亲自试一试

全局属性

<kbd> 标签还支持 HTML 中的全局属性。

事件属性

<kbd> 标签还支持 HTML 中的事件属性。

默认的 CSS 设置

大多数浏览器将使用以下默认值显示 <kbd> 元素：

kbd {
  font-family: monospace;
}

亲自试一试

浏览器支持

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
支持 支持 支持 支持 支持