跳到主要内容位置

使用 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 的样式,可以直接使用。

提示

《Vue 3.x 全家桶完全指南与实战》课程已上线,包括 Vue 3.x、TypeScript、Vue Router 4.x、Vuex 4.x 所有初级到高级的语法特性详解,让你完全胜任 Vue 前端开发的工作。点击查看详情。

《React即时通信UI实战》课程,利用 Storybook、Styled-components、React-Spring 打造属于自己的组件库。

新书《JavaScript 基础语法详解》已上架,可在京东、当当、淘宝等各大电商购买