kbd标签默认样式在文档中几乎不可见，因其仅设置font-family: monospace，缺乏背景、边框、内边距和圆角，导致视觉上与普通等宽文本无异；必须显式添加background-color、border、border-radius、padding及vertical-align才具备基本可识别性。
kbd 标签默认样式为什么在文档里根本看不见
浏览器对 <kdb>（注意：不是 <kbd>，拼错就失效）的默认渲染只设了 font-family: monospace，没背景、没边框、没内边距。在 Tailwind、Bootstrap 或现代 CSS 重置环境下，它直接退化成普通等宽文字，和 <code> 几乎无法区分。用户扫读时根本注意不到这是快捷键，更别说理解操作意图。
必须显式设置以下四项才具备基本可识别性：
-
background-color: #f0f0f0（或#f5f5f5），否则视觉无“按键感” -
border: 1px solid #ccc和border-radius: 4px，否则缺乏物理按键轮廓 -
padding: 2px 6px（小字号下文字贴边会糊成一团） -
vertical-align: middle，否则与周围文本基线错位
组合键必须拆开写，不能塞进一个 <kdb> 里
写成 <kdb>Ctrl+S</kdb> 是典型错误：屏幕阅读器读作 “C T R plus S”，而非 “Control S”；也无法单独给 Ctrl 加修饰键样式；更难适配 macOS 的 ⌘ 符号替换逻辑。
正确结构是每个物理按键独立包裹，连接符（+、/、空格）写在标签外部：
立即学习“前端免费学习笔记（深入）”；
<kdb>Ctrl</kdb>+<kdb>S</kdb><kdb>Shift</kdb>+<kdb>Alt</kdb>+<kdb>F4</kdb>-
<kdb>⌘</kdb>+<kdb>S</kdb>（macOS 用 UnicodeU+2318，别写<kdb>Cmd</kdb>）
禁止嵌套：<kdb><kdb>Ctrl</kdb><kdb>S</kdb></kdb> 虽旧标准允许，但现代浏览器解析不一致，且增加 DOM 复杂度。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
macOS 和 Windows 快捷键不能混写斜杠
<kdb>Ctrl / Cmd</kdb> + <kdb>S</kdb> 是语义断裂写法：斜杠不是按键，也不是平台分隔符，会让屏幕阅读器卡顿，CSS 也无法针对性隐藏某一边。
静态文档应明确区分用户平台：
Windows/Linux: <kdb>Ctrl</kdb> + <kdb>S</kdb> | macOS: <kdb>⌘</kdb> + <kdb>S</kdb>- 若需紧凑排版，可用
<kdb>Ctrl</kdb>+<kdb>⌘</kdb>配合 CSS 切换显示，比斜杠可靠
功能键统一首字母大写：<kdb>Esc</kdb>、<kdb>Enter</kdb>、<kdb>Tab</kdb>，不用 return 或 ↵。
VS Code 和 Prettier 容易踩的低级坑
Emmet 默认不提供 kdb 缩写（注意不是 kbd 拼错），敲 kdb+Tab 不会生成 <kdb></kdb>。手动输入时两个常见错误：
- 标签名拼成
<kdb>（d/b 颠倒），浏览器静默忽略，渲染为普通文字 - 在
.vue或.jsx文件中未声明 HTML 语言模式，VS Code 把<kdb>当作自定义组件，语法高亮异常，Emmet 补全失效
Prettier 若配置了 htmlWhitespaceSensitivity: "strict"，会删掉 <kdb>Ctrl</kdb>+<kdb>S</kdb> 中 + 前后的空格，变成 <kdb>Ctrl</kdb>+<kdb>S</kdb>——看似无害，但某些老旧屏幕阅读器对紧凑连接符识别不稳定。
深色模式下别只靠 @media (prefers-color-scheme: dark) 硬切背景色；推荐用 color-scheme: light dark 配合系统色值，避免小字号下对比度不足。
