kbd标签唯一作用是语义化标注用户需按下的物理按键，必须用于真实快捷键场景，组合键需拆分为独立kbd元素并正确书写，且需CSS重置样式以确保可访问性与视觉辨识。
标签只有一件事能做：告诉浏览器和屏幕阅读器「这是用户要按的物理键」。它不监听事件、不触发行为、不替代输入框，也不管你有没有配 CSS。用错地方，语义就崩了；样式不重置，它在多数项目里根本看不出来。
什么时候必须用 kbd，而不是 code 或纯文本
只有当内容明确对应「用户按下某个真实按键或组合键」时，kbd 才是语义正确的选择。
-
Ctrl+Shift+R是快捷键操作 → 用kbd -
git commit -m "init"是命令行指令 → 用code -
fetch()是函数名 → 用code，不是kbd - “请输入邮箱”是提示文字 → 用普通文本或
span，别套kbd - 终端输出的
Error: timeout→ 用samp
混用会破坏可访问性：读屏器把 kbd 当作「键盘输入动作」处理，把 code 当作「代码字面量」，两者不可互换。
kbd 的组合键写法必须拆开，加号不能进标签
写成 <kbd>Ctrl+Shift+R</kbd> 是错的——空格、+、/ 都会被当成按键名渲染，读屏器可能读成 “C T R plus S H I F T plus R”。
立即学习“前端免费学习笔记（深入）”；
- 正确写法：
<kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>R</kbd> - 跨平台写法：
<kbd>Cmd</kbd>/<kbd>Ctrl</kbd>（斜杠在外） - 序列操作：
<kbd>Esc</kbd>→<kbd>Tab</kbd>→<kbd>Enter</kbd> - 修饰键（
Ctrl/Shift/Cmd）必须单独包裹，首字母大写 - 禁用嵌套：
<kbd><kbd>Ctrl</kbd><kbd>C</kbd></kbd>视觉上可能有分层，但 Firefox 旧版支持差，语义也冗余
默认样式靠不住，CSS 重置四条底线必须写
现代项目中，normalize.css、Bootstrap、Tailwind 等都会清掉 kbd 的默认样式。不手动补，它就跟普通文本一模一样。
- 必须设等宽字体：
font-family: ui-monospace, 'SFMono-Regular', Consolas, monospace; - 必须加内边距：
padding: 2px 4px;（太小缩放时裁字，太大破坏行高） - 必须设圆角和浅灰背景：
border-radius: 3px; background-color: #f0f0f0; - 禁用
tabindex和outline：它本不可聚焦，加了反而干扰键盘导航
别用 font-size: 12px —— 缩放时文字被截断，改用 0.875em 或 rem。
kbd 和快捷键监听完全无关
给 <kbd>Ctrl+S</kbd> 绑 addEventListener('keydown') 不会生效。因为 kbd 是静态语义容器，不参与 DOM 焦点流，也不触发任何事件。
- 快捷键响应必须走全局监听：
document.addEventListener('keydown', e => { if (e.ctrlKey && e.key === 's') { /* save */ } }) - 修饰键状态（
ctrlKey、shiftKey）要手动判断，kbd标签本身不提供任何运行时数据 - 想让用户知道当前快捷键是否生效？那是 UI 状态管理，跟
kbd的 HTML 结构无关
最容易被忽略的一点：kbd 的价值不在视觉，而在语义链——它让文档可被机器理解、被读屏器准确朗读、被搜索引擎区分「操作指令」与「代码片段」。样式只是附带，别本末倒置。
