# 键位

纯样式组件：不需要 JS。用 <kbd class="zh-kbd"> 显示键盘按键，如快捷键提示。

**依赖**：`zhaoui.css` 与 `zhaoui.js`（原生 HTML、CSS、JS，不需要框架或 jQuery）。

## 用法

```html
<p>按 <kbd class="zh-kbd">Ctrl</kbd> + <kbd class="zh-kbd">K</kbd> 打开搜索，<kbd class="zh-kbd">Esc</kbd> 关闭。</p>
```

## 样式类

`zh-kbd`

## 属性

| 属性 | 用在 | 取值 | 说明 |
|---|---|---|---|
| `zh-kbd` | <kbd>（class） | 按键名 | 一个按键一个元素；组合键用多个并排 |

## 无障碍

- 使用语义化的 <kbd>
- 符号键（如 ⌘）读屏可能读不出，重要的快捷键请同时在文字里写明

## 常见问题

### 键位是什么？

纯样式组件：不需要 JS。用 <kbd class="zh-kbd"> 显示键盘按键，如快捷键提示。

### 怎么使用键位？

先在页面里引入 zhaoui.css 和 zhaoui.js（放在 </body> 前，不加 defer），再照本页「用法」里的标记书写。

### 键位支持键盘和读屏吗？

使用语义化的 <kbd>；符号键（如 ⌘）读屏可能读不出，重要的快捷键请同时在文字里写明。

### 键位需要依赖框架吗？

不需要。ZhaoUI 是原生 HTML、CSS 和 JavaScript，不依赖 jQuery、Vue 或 React。