<kbd> 标签仅用于语义化展示快捷键样式，不处理任何键盘逻辑；需配合 JavaScript 事件监听实现交互功能，嵌套使用易导致渲染不一致，推荐扁平化写法并用 Unicode 表示特殊符号。
kbd 标签只渲染样式，不处理键盘逻辑
<kbd> 是纯语义化标签，浏览器默认把它渲染成类似键盘按键的浅灰背景+圆角边框（各浏览器略有差异），但它**不会监听按键、不触发事件、也不做任何交互**。想让用户看到「按 Ctrl+S 保存」，直接写 <kbd>Ctrl</kbd>+<kbd>S</kbd> 就行；但用户真按下 Ctrl+S，和这个标签完全无关。
常见错误是以为写了 <kbd>Esc</kbd> 就能自动关闭弹窗——实际必须另外用 addEventListener('keydown', ...) 捕获事件。
- 适合场景：文档、帮助提示、设置面板里静态展示快捷键组合
- 不适合场景：替代事件监听、实现快捷键功能、动态高亮当前按下的键
- 组合键推荐写法：
<kbd>Ctrl</kbd><kbd>Shift</kbd><kbd>T</kbd>（不要用加号或箭头符号，语义更清晰）
嵌套 kbd 标签表现不稳定，尽量扁平化
HTML 规范允许 <kbd> 嵌套，比如 <kbd><kbd>Ctrl</kbd>+<kbd>C</kbd></kbd>，但实际渲染中，Chrome 和 Firefox 对内层 <kbd> 的 padding 和 font-size 处理不一致，可能导致间距错乱或字体缩放异常。
更稳妥的做法是全部展平：
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
<kbd>Ctrl</kbd><kbd>+</kbd><kbd>C</kbd>
- 避免嵌套，用多个并列
<kbd>标签 + 文本节点（如+或 - 如果需要视觉分组（比如「Ctrl+Alt+Del」整体带底色），用
<span>包裹再加 CSS，别依赖嵌套<kbd> - 移动端 Safari 对嵌套
<kbd>支持较弱，部分机型会忽略内层样式
键盘符号显示异常？优先用 Unicode 字符而非图片
像 ⌘（Command）、⌥（Option）、⇧（Shift）这类符号，在 <kbd> 里直接写 Unicode 是最轻量的方案，比加载 SVG 或字体图标更可靠：
<kbd>⌘</kbd><kbd>C</kbd> <!-- ⌘C -->
- 常用符号对应码：⌘ =
⌘，⌥ =⌥，⇧ =⇧，⌫ =⌫（退格） - 不要用图片或自定义字体——某些环境（如禁用图片/字体的终端浏览器）会显示空白或方块
- Windows 用户看不到 ⌘ 符号时，会 fallback 到字母 C，所以建议搭配文字说明，例如：
<kbd>⌘</kbd> (<em>Command</em>) + <kbd>C</kbd>
需要响应真实按键？必须配合 JavaScript 监听
用户按下 Ctrl+S 时，<kbd> 标签不会变色、不会闪烁、也不会自动更新内容。要实现「按下时高亮对应 <kbd>」，得手动绑定事件：
document.addEventListener('keydown', e => {
const keyEl = document.querySelector(`kbd[data-key="${e.key}"]`);
if (keyEl) keyEl.classList.add('active');
});
document.addEventListener('keyup', e => {
const keyEl = document.querySelector(`kbd[data-key="${e.key}"]`);
if (keyEl) keyEl.classList.remove('active');
});- 给每个
<kbd>加data-key属性（如<kbd data-key="s">S</kbd>），注意e.key大小写敏感 - 组合键（如 Ctrl+S）需检查
e.ctrlKey等修饰键状态，不能只靠e.key - 浏览器默认行为（如 Ctrl+S 弹出保存对话框）会干扰监听，必要时用
e.preventDefault()，但需谨慎——影响用户正常使用
真正难的不是显示快捷键，而是准确捕获和区分各种修饰键组合、处理不同键盘布局（比如 Mac 的 Cmd vs Windows 的 Ctrl）、以及兼容屏幕阅读器对 <kbd> 的朗读逻辑。这些细节往往比标签本身更耗时间。
