跳到主要内容位置

kbd1

查看所有标签(分类)

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

张旭乾
软件工程师 / B站UP主

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

如何使用 kbd

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