必须用仅当明确提示用户按下物理键，如Ctrl、Enter；函数名、命令、点击动作等均不可误用，组合键须分写为Ctrl + S。
什么时候必须用 <kbd></kbd>，而不是 <code> 或 <span></span>
只有当你在文档中明确告诉用户「请用手指按下这个物理键」时，<kbd></kbd> 才是语义正确的选择。比如写帮助文档、编辑器快捷键面板、命令行教程里的操作提示。
常见误用：<kbd>fetch()</kbd>（这是函数名，该用 <code>）；<kbd>npm install</kbd>（这是要执行的命令，不是按键）；<kbd>点击保存</kbd>（这是鼠标动作，<kbd></kbd> 不处理点击）。
<code>用于机器可解析的代码字面量：如document.querySelector()、class="modal"-
<kbd></kbd>只用于人按下的键：如Ctrl、F5、Cmd、Enter - 纯样式需求（比如想让文字变等宽）直接用 CSS，别靠
<kbd></kbd>“凑效果”
<kbd></kbd> 组合键怎么写才不丢语义
组合键不能塞进一个 <kbd></kbd> 里，比如 <kbd>Ctrl+S</kbd> 是错的——它会让屏幕阅读器读成 “Control S”，而不是 “Control plus S”，也破坏了修饰键和主键的层级关系。
- 正确写法是每个独立按键单独包裹：
<kbd>Ctrl</kbd> + <kbd>S</kbd> - 修饰键（
Ctrl、Shift、Cmd、Alt）建议优先单独套一层，方便后续加 CSS 区分视觉权重 - 跨平台提示写成：
<kbd>Cmd</kbd> / <kbd>Ctrl</kbd>，斜杠放标签外，不进<kbd></kbd> - 嵌套写法（如
<kbd><kbd>Ctrl</kbd><kbd>C</kbd></kbd>）虽合法，但 Firefox 旧版可能忽略内层样式，生产环境慎用
默认样式靠不住，但 CSS 改法有硬限制
浏览器对 <kbd></kbd> 的默认渲染只是 font-family: monospace，没边框、没背景、没 padding，实际页面里几乎看不出和普通文本的区别。
立即学习“前端免费学习笔记（深入）”；
加 CSS 没问题，但要注意三点：
- 别设
tabindex或监听click事件——<kbd></kbd>本身不可聚焦、不响应交互，加了反而误导辅助技术 - padding 别小于
0.2em，否则高缩放比或 Windows 高对比度模式下文字会被裁切 - 如果项目用了
normalize.css或类似重置，检查是否清掉了kdb的font-family，需手动补回
和 <code>、<samp></samp>、<var></var> 混用时怎么划清边界
这四个短语级标签常一起出现在技术文档里，混用等于主动放弃语义。搜索引擎和读屏器不会报错，但会把「按 Ctrl+S」理解成「运行 Ctrl+S 这段代码」。
-
<kbd></kbd>= 用户按的键（<kbd>Esc</kbd>） <code>= 程序里写的代码（<code>fetch('/api')）-
<samp></samp>= 程序运行输出（<samp>404 Not Found</samp>） -
<var></var>= 可变部分（<code>git checkout <var>branch-name</var>）
最易被忽略的是命令行流程中的混合场景：比如「运行 <code>curl -X POST>>，然后按 <kbd>Enter</kbd>」——这里 <code> 和 <kbd></kbd> 各司其职，少一个都会让自动化工具或语音命令系统无法准确识别操作意图。
