kbd 必须重写样式才能体现按键感：设 background-color、border、border-radius、padding 和 vertical-align；组合键需分标签书写，禁用嵌套与混排符号；语义正确优先于视觉，且不承担交互功能。
kbd 默认样式根本不能用，必须重写
浏览器对 <kbd></kbd> 的默认渲染只有 font-family: monospace，没背景、没边框、没内边距，在现代 CSS 重置（如 Normalize.css）或框架下直接退化成普通等宽文本，和 <code> 混在一起，用户根本注意不到这是快捷键。
- 必须显式设置
background-color（推荐#f0f0f0或#f5f5f5），否则毫无“按键感” - 加
border: 1px solid #ccc和border-radius: 2px（不是 4px，真实键盘圆角更小） -
padding: 2px 6px是底线，小于这个值文字会贴边糊成一团 - 务必设
vertical-align: middle，否则和周围行高错位，尤其和中文混排时明显下沉
组合键必须拆开写，+ 号不能塞进一个 kbd 里
写成 <kbd>Ctrl+S</kbd> 是语义错误：屏幕阅读器读作 “C T R plus S”，不是 “Control S”；也无法单独给 Ctrl 加修饰键样式；更没法适配 macOS 的 ⌘ 符号替换。
- 正确结构是每个物理按键独立包裹：
<kbd>Ctrl</kbd> + <kbd>S</kbd> - + 号必须放在标签外部，且建议用普通文本，不要套
<kbd></kbd>——除非你真想把它当“加号键”（比如计算器场景） - 跨平台提示写法：
<kbd>Cmd</kbd> / <kbd>Ctrl</kbd>，斜杠在外，不进任何<kbd></kbd> - 禁止嵌套
<kbd><kbd>Ctrl</kbd><kbd>S</kbd></kbd>，W3C 不反对但现代解析不一致，DOM 层级无必要加深
macOS 的 Cmd 键该用 ⌘ 还是文字？
直接写 Cmd 在 macOS 用户眼里不够直观，但他们习惯看符号 ⌘（U+2318）。但乱用 Unicode 会导致旧系统或缺失字体时显示方块。
- 优先用标准 Unicode
⌘，所有现代 macOS/iOS 浏览器原生支持，VoiceOver 也能朗读为 “Command key” - 避免用图片、自定义字体或 SVG，会破坏可访问性
- 若需兼容 IE11 等极老环境，回退为文字并加
aria-label="Command"：<kbd aria-label="Command">Cmd</kbd> - 别写
<kbd>⌘+V</kbd>—— 符号和字母混在一个标签里，语义断裂，复制时还可能丢符号
响应式下 kbd 换行错乱、移动端点击热区太小
小屏设备上 <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>T</kbd> 容易被折成两行，视觉和语义全崩；同时默认尺寸在触摸屏上点不准。
- 加
white-space: nowrap防止单个<kbd></kbd>内部换行（比如长键名 “Page Down”） - 整个快捷键组合建议包在
<span class="shortcut"></span>里，再统一设display: inline-flex; gap: 0.2em控制间距 - 最小点击热区：设
min-width: 24px+padding: 2px 8px，确保手指能稳稳点中 - 深色模式下必须手动适配背景色，
@media (prefers-color-scheme: dark)里把background-color改成#333或#444，别依赖自动反色
<kbd></kbd> 只负责说“这里代表人按下的键”，它不监听事件、不接收输入、不触发行为。想做快捷键响应？得用 document.addEventListener('keydown', handler) 单独处理。把 <kbd></kbd> 当成交互入口去绑事件，只会浪费调试时间。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
