<kbd>必须拆开写、不能监听、默认样式不可靠——三点缺一不可。组合键需多个<kbd>标签外加分隔符，修饰键须独立包裹；须重置字体、内边距、圆角、背景色；其仅作语义展示，快捷键逻辑须JS手动实现。
必须拆开写、不能监听、默认样式不可靠——这三个点没处理好，<kbd> 就等于白用。
组合键必须拆成多个 <kbd>，加号写在外边
浏览器和读屏软件靠结构识别按键逻辑。<kbd>Ctrl+Shift+T</kbd> 会被读成 “C T R plus S H I F T plus T”，不是“Control-Shift-T”。正确写法是让每个物理键独立成标签，分隔符（+、/、→）放在标签外部。
-
<kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>T</kbd>—— 语义清晰，NVDA/VoiceOver 正确朗读为 “Control Shift T” -
<kbd>Cmd</kbd>/<kbd>Ctrl</kbd>—— 表示跨平台快捷键，斜杠不被误读为按键 -
<kbd>Esc</kbd>→<kbd>Tab</kbd>→<kbd>Enter</kbd>—— 序列操作用箭头分隔，不嵌套 - 别写
<kbd>Ctrl + V</kbd>：空格会被当成“Space”键渲染出来
修饰键（Ctrl/Shift/Cmd）必须单独包裹
修饰键本身是真实物理按键，不是修饰符号。把 Ctrl 和 C 塞进同一个 <kbd>，就丢失了“按住+再按”的时序语义，也破坏了屏幕阅读器的解析路径。
-
<kbd>Ctrl</kbd>、<kbd>Shift</kbd>、<kbd>Cmd</kbd>都要独立成标签，首字母大写符合系统惯例 - Mac 场景优先用
<kbd>Cmd</kbd>，别用<kbd>⌘</kbd>—— 符号非标准字符，复制粘贴易乱码，AT 工具无法映射 - 避免
<kbd><kbd>Ctrl</kbd><kbd>C</kbd></kbd>这种三层嵌套：Chrome 支持尚可，Firefox 旧版可能只渲染最外层
默认样式在多数项目里会失效，必须手动重置
现代 CSS 重置库（如 normalize.css）或 UI 框架（如 Bootstrap）常清掉 <kbd> 的 font-family 或设 background: none，结果它看起来和普通文本一模一样。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 最低限度补这四条：
font-family: ui-monospace, 'SFMono-Regular', Consolas, monospace;、padding: 2px 4px;、border-radius: 3px;、background-color: #f0f0f0; - 别用
font-size: 12px—— 缩放时文字被裁切，改用0.875em或rem - 禁用
tabindex和outline：它本不可聚焦，加了反而干扰键盘导航流 - 别和
<code>混用：<code>fetch()</code>是函数名，<kbd>Enter</kbd>是按键，语义错位会影响 SEO 和读屏体验
<kbd> 和快捷键监听完全无关
很多人给 <kbd>Ctrl+S</kbd> 直接绑 addEventListener('keydown')，发现没反应——因为 <kbd> 不触发任何事件，也不参与 DOM 焦点流。
- 响应快捷键必须用原生 JS：
document.addEventListener('keydown', e => { if (e.ctrlKey && e.key === 's') { e.preventDefault(); /* 保存逻辑 */ } }); - 用
e.key（如's'、'Escape'）而非e.code（如'KeyS'），更贴近用户感知 -
<kbd>文本只是展示，和监听逻辑之间没有自动映射关系，得手动对齐（比如<kbd>Ctrl</kbd>+<kbd>S</kbd>对应e.ctrlKey && e.key === 's'）
最容易被忽略的是：写了 <kbd> 不等于完成了快捷键说明。它只是语义起点，后续的样式重置、跨平台适配、与 JS 监听的对应关系，缺一不可。
