kbd标签必须独立包裹单个按键，组合键用外部连接符（如+、/、→）分隔，禁止嵌套；语义正确性依赖结构而非容器标签，需配合CSS增强可读性与可访问性。
kbd 必须独立包裹单个按键，不能靠
嵌套来表达组合逻辑
<p> 只是段落容器，对 <kbd> 的语义没有任何增强或约束作用。很多人误以为把多个 <kbd> 塞进同一个 <p> 就能“组织”成快捷键，其实不是——组合关系由 <kbd> 自身的嵌套结构或外部连接符决定，<p> 完全不参与语义解析。
- ✅ 正确写法：
<p>按<kbd>Ctrl</kbd>+<kbd>S</kbd>保存</p> - ❌ 错误理解：
<p><kbd>Ctrl+S</kbd></p>（语义断裂，加号被吞进标签里） - ❌ 更错：
<p><kbd><kbd>Ctrl</kbd><kbd>S</kbd></kbd></p>（非法嵌套，HTML 验证失败）
组合键的连接符必须写在 标签外部
加号、斜杠、空格、箭头这些都不是按键，它们只是视觉/逻辑分隔符，不能塞进任何 <kbd> 里。浏览器和屏幕阅读器会把 <kbd>+</kbd> 内的内容当作一个击键单元来处理。
- ✅ 正确：
<kbd>Ctrl</kbd>+<kbd>S</kbd>（+ 是普通文本） - ✅ 平台并列：
<kbd>Cmd</kbd>/<kbd>Ctrl</kbd>+<kbd>R</kbd>（斜杠也是普通文本） - ✅ 序列操作：
<kbd>Esc</kbd>→<kbd>Tab</kbd>→<kbd>Enter</kbd> - ⚠️ 注意：不要给连接符加
<kbd>，比如<kbd>+</kbd>是多余且易误导的
为什么你看到有些代码用 CtrlS？它合法但不推荐
W3C 标准确实允许 <kbd> 嵌套，用来表示「一组共同生效的按键」，比如 <kbd><kbd>Ctrl</kbd><kbd>Shift</kbd><kbd>Esc</kbd></kbd>。但现实是：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- Firefox 旧版可能只渲染外层
<kbd>，内层丢失样式 - Chrome 和 Safari 对嵌套解析一致，但 DOM 结构变深，CSS 控制更麻烦
- 多数现代文档系统（如 Docsify、Docusaurus）默认 CSS 不适配嵌套
<kbd>，导致背景/边框错位 - 屏幕阅读器对嵌套支持不统一：NVDA 可能读作 “Control and Shift and Escape”，而 VoiceOver 可能跳过内层
真正该花时间调的是 CSS，不是嵌套结构
浏览器默认的 <kbd> 几乎看不见：无背景、无边框、padding 极小。不加 CSS，用户根本注意不到这是快捷键。
立即学习“前端免费学习笔记（深入）”；
- 必须设置：
background-color: #f0f0f0、border: 1px solid #ccc、border-radius: 4px、padding: 2px 6px - 修饰键（Ctrl、Shift、Cmd）建议略小：
<kbd>Ctrl</kbd>{font-size: 0.9em} - 相邻
<kbd>之间加负 margin 消除割裂感：kbd + kbd { margin-left: -2px; } - 小屏下防换行溢出：父容器设
overflow-x: auto，<kbd>用font-size: clamp(0.75rem, 2.5vw, 0.875rem)
<p> 上动脑筋，重点盯住每个 <kbd> 是否独立、连接符是否在外、样式是否真生效。 
