跳到主要内容位置

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

峰华

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

如何使用 kbd

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

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

预览:

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

info

有时候为了方便设置设置样式,我们也可以把多个 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 的样式,可以直接使用。