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