kbd标签是语义化元素，专用于标记用户需按下的物理按键或组合键，必须分开展示如CtrlS，不可嵌套或合并书写，且不具交互功能。
kbd 标签不是装饰性标签，它有明确语义
<kbd> 是 HTML 中的语义化元素，专用于标记用户输入的键盘操作（比如快捷键、命令行输入），浏览器默认会渲染成类似按键的样式（通常带边框、等宽字体、浅灰背景）。它不是为了“高亮好看”而存在，而是告诉辅助技术“这是键盘输入”，所以别用它包裹鼠标操作或纯文本提示。
常见错误是把
<kbd>Ctrl</kbd>+<kbd>S</kbd> 写成 <code><kbd>Ctrl+S</kbd> —— 这会让屏幕阅读器读作“Ctrl加S”，而非“按住 Ctrl 键，再按 S 键”，语义丢失。</p> <ul> <li>正确写法：<code><kbd>Ctrl</kbd><kbd>S</kbd></li> <li>组合键之间不用加 <code>+或
，靠 CSS 控制间距更可靠
Ctrl、Alt、Shift、Meta）单独套一层 <kbd>
S、F5、Enter）也各自独立包裹浏览器默认样式差异大，必须重置或增强
Chrome 和 Firefox 对 <kbd> 的默认渲染接近，但 Safari 会忽略部分样式（比如背景色），Edge 旧版本甚至不显示边框。直接依赖默认样式在多端展示不稳定。
推荐最小化重置：
立即学习“前端免费学习笔记（深入）”；
kbd {
padding: 2px 6px;
border: 1px solid #aaa;
border-radius: 3px;
background-color: #f5f5f5;
font-family: ui-monospace, monospace;
font-size: 0.9em;
line-height: 1.2;
}
- 避免用
box-shadow模拟按键浮雕效果——移动端点击反馈易冲突 - 别设固定
width或height，让内容自适应（比如F12比Esc宽） - 深色模式下，
background-color建议用color-scheme: light dark或媒体查询适配
嵌套和组合场景：什么时候该用多个 kbd，什么时候不该
快捷键组合 ≠ 字符串拼接。关键看操作时序和物理按键关系。
- 同时按下的组合（如保存）：
<kbd>Ctrl</kbd><kbd>S</kbd></li> <li>先按后松再按（如 Alt+Tab 切换窗口）：<code><kbd>Alt</kbd><kbd>Tab</kbd></li> <li>需要长按的修饰键 + 单次触发键（如 Ctrl+C 复制）：<code><kbd>Ctrl</kbd><kbd>C</kbd></li> <li>但菜单路径（如 File → Open）不能用 <code><kbd>
，该用<menuitem>或普通文本 + 箭头符号 -
<kbd>里不要放<span>或其他内联元素——语义污染，且可能破坏可访问性树
可访问性陷阱：键盘焦点与 aria-label 不要乱加
<kbd> 本身不是交互元素，它不接收焦点，也不应添加 tabindex 或 aria-label。强行加会导致屏幕阅读器重复播报或焦点逻辑混乱。
- 如果快捷键说明附带可点击的“试用”按钮，把
aria-label放在按钮上，而不是<kbd>上 - 想强调某组快捷键（如“常用快捷键”区块），用
<section aria-labelledby="shortcuts-heading">包裹，标题用<h3 id="shortcuts-heading"> - 避免用 JavaScript 监听
<kbd>元素的 click —— 用户根本不会点它，那是文档说明，不是控件
真正容易被忽略的是：快捷键文案必须和实际功能一致。比如页面里监听的是 Ctrl+Shift+K，但文档写成 <kbd>Ctrl</kbd><kbd>K</kbd>，用户照做失败，问题不在样式，而在同步成本。
