HTML5规定是标注键盘快捷键的唯一语义化标签，应分开展示组合键如Ctrl+S，避免用或替代；需注意跨平台符号（如⌘）、编辑器快捷输入及样式调整时不破坏可访问性。
用
HTML5 明确规定 是语义化表示“用户输入的键盘按键或组合”的唯一正确方式。浏览器默认会渲染成等宽字体+浅灰背景（具体样式可覆盖），但关键是它向屏幕阅读器、搜索引擎和协作工具传递了“这是快捷键”这一语义。
常见错误是用 加 CSS 模拟效果，或者直接套 ——这会让辅助技术误判为强调内容，而非操作指令。
-
Ctrl + S→ 正确：组合键分开展示，语义清晰 -
Ctrl+S→ 不推荐：单个标签包裹组合，丢失按键层级，部分读屏软件可能连读为“Control S”而非“Control plus S” -
Esc→ 无语义，无法被自动化工具识别
编辑器里快速插入
手动敲标签效率低，尤其在写文档、帮助页或技术博客时频繁出现快捷键。主流编辑器可通过以下方式提速：
- VS Code：安装插件 Auto Rename Tag + 自定义 snippet，例如设置前缀
kbd展开为$1，光标停在 $1 处 - Typora / Obsidian：启用 HTML 内联支持后，直接输入
Alt+F4即实时渲染（无需额外插件） - Web 富文本编辑器（如 TinyMCE）：需配置
valid_elements允许kbd标签，否则会被自动过滤掉
注意：某些 CMS（如 WordPress 古腾堡区块）默认禁用 ，需在主题 functions.php 中用 wp_kses_allowed_html() 显式放开。
立即学习“前端免费学习笔记（深入）”；
多平台快捷键写法差异与兼容处理
Windows、macOS、Linux 的快捷键符号习惯不同，纯靠 无法自动适配。不能只写 Cmd+C 就认为 macOS 用户能看懂——Cmd 不是标准键名，应使用 Unicode 符号或约定俗成缩写。
- macOS 推荐写法：
⌘C（显示为 ⌘C），⌘是 Command 键符号；⌃是 Control，⌥是 Option - 跨平台统一写法：
Ctrl / ⌘ + C，用斜杠分隔，明确提示“根据系统选其一” - 避免写
Windows key——应为⏎（⊞）或直接写Win（行业通用缩写）
样式微调时别破坏语义和可访问性
默认 样式简陋，常被重写。但改样式时容易踩两个坑：
- 移除
font-family: monospace后，按键字符宽度不一致，导致 “Ctrl+C” 和 “Cmd+Q” 对不齐——建议保留等宽字体，仅调整背景色和 padding - 用
display: inline-block加边框时，未设置vertical-align: middle，导致与其他行内文字基线错位 - 最关键：不要给
加role="button"或tabindex——它不是交互控件，加了反而误导键盘导航用户
真正需要响应快捷键触发动作的地方，应该用 JavaScript 监听 keydown 事件，而不是靠修饰 标签来模拟功能。
