使用 HTML 原生 kbd 标签显示快捷键样式

在编写技术文档的时候，我们经常会给用户展示一些常用的快捷键，那么在 HTML 中，我们可以使用原生的 <kbd> 标签来表示一个按键，它也是 HTML 语义化的标签之一，相比于使用 <div> 等通用的、无意义的标签，使用语义化的 <kbd> 可以直接知道这是代表按键的元素。

如何使用 kbd

<kbd> 是一个行内元素，跟 span 类似，每个按键都放到一个单独的 <kbd> 标签即可，例如下方示例：

<kbd>ctrl</kbd>+<kbd>s</kbd>

预览：

kbd 标签中的字体默认会显示成等宽字体（Monospace Font），符合计算机字体的视觉展现。

信息

有时候为了方便设置设置样式，我们也可以把多个 kbd 元素放到一个大的 kbd 标签中，例如：

<kbd><kbd>ctrl</kbd>+<kbd>s</kbd></kbd>

设置 kbd 样式

我们可以通过 CSS 来设置 kbd 元素的样式，让它更像一个按键，例如：

<style>
  kbd {
    background-color: hsl(0deg, 0%, 99%);
    border-radius: 3px;
    border: 1px solid hsl(0deg, 0%, 80%);
    padding: 4px 5px;
    font-weight: bold;
  }
</style>

按下 <kbd>ctrl</kbd> + <kbd>s</kbd> 保存文档。

预览：

小结

好了，这个就是 kbd 标签的使用方式，还有通过 CSS 设置样式的方式。这个标签在 Markdown 文档中也可以使用，像 docusaurus 这样的静态网站生成器，默认就提供了 kbd 的样式，可以直接使用。