kbd 标签仅用于语义化表示用户需按下的物理按键，如 ctrl、enter；组合键须拆分为多个 kbd 元素并用 + 连接，且需手动设置等宽字体、背景色等样式，它不参与事件监听或焦点管理。
kbd 标签不是“键盘输入控件”，也不是快捷键监听器——它只做一件事：告诉浏览器和屏幕阅读器「这段文字代表用户要按下的物理按键」。
什么时候必须用 kbd，而不是 code 或纯文本
只有当你在文档中明确描述「用户需用手指按下某个真实键」时，kbd 才语义正确。比如帮助页、编辑器快捷键面板、CLI 工具网页提示。
-
Ctrl、Enter、F5、Cmd→ ✅ 该用kbd -
git commit -m "init"、fetch()、npm install→ ❌ 该用code - “点击保存”、“拖拽文件” → ❌ 是鼠标/手势动作，
kbd不适用 - 终端输出的
Error: timeout→ ❌ 该用samp
kbd 组合键写法：加号不能进标签，修饰键必须拆开
写成 <kbd>Ctrl+S</kbd> 是错的——空格、+、/ 都会被当成按键名渲染，屏幕阅读器读作 “C T R plus S”，无法识别修饰键逻辑。
- ✅ 正确：
<kbd>Ctrl</kbd> + <kbd>S</kbd> - ✅ 跨平台：
<kbd>Cmd</kbd> / <kbd>Ctrl</kbd>（斜杠在外） - ✅ 序列操作：
<kbd>Esc</kbd> → <kbd>Tab</kbd> → <kbd>Enter</kbd> - ❌ 禁止嵌套：
<kbd><kbd>Ctrl</kbd><kbd>C</kbd></kbd>在 Firefox 旧版表现不一致，语义冗余
默认样式靠不住，必须手动重置四条底线
现代项目中，normalize.css、Bootstrap、Tailwind 都会清掉 kbd 的默认样式。不补 CSS，它就跟普通文本一模一样。
- 必须设等宽字体：
font-family: ui-monospace, monospace - 必须有视觉区分：
background-color: #f0f0f0+border-radius: 3px - 内边距要合理：
padding: 2px 4px（太小缩放裁字，太大破坏行高） - 禁用聚焦干扰：
tabindex和outline一律不加——它本不可聚焦
kbd 和快捷键监听完全无关
给 <kbd>Ctrl+S</kbd> 绑 addEventListener('keydown') 不会生效。因为 kbd 是静态语义容器，不参与 DOM 焦点流，也不触发任何事件。
- 快捷键响应必须走全局监听：
document.addEventListener('keydown', e => { if (e.ctrlKey && e.key === 's') { /* save */ } }) - 修饰键状态（
ctrlKey、shiftKey）要手动判断，kbd标签本身不提供任何运行时数据 - 想让用户知道快捷键是否生效？得靠 JS 动态控制 UI 状态，
kbd只负责“说清楚按什么”
最容易被忽略的是：组合键写法错误会让屏幕阅读器完全误解操作意图，而 CSS 没重置则让 kbd 在多数项目里根本看不见——它既没语义效果，也没视觉反馈，等于白写。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
