应使用 <kbd> 标签标记键盘快捷键，如 <kbd>Ctrl</kbd>+<kbd>C</kbd>，不可合并为 <kbd>Ctrl+C</kbd>；它语义明确、支持无障碍访问，优于 <code> 或 <span>。
HTML 里怎么标键盘快捷键（比如 Ctrl+C）
用 <kbd> 标签，不是 <code>，也不是 <span> 加 class。它专为用户按下的物理按键或组合键设计，语义清晰，屏幕阅读器也能正确朗读为“keyboard input”。
-
<kbd>Ctrl</kbd>+<kbd>C</kbd>渲染效果是：Ctrl+C（浏览器默认加粗+等宽+浅灰背景） - 组合键要拆开写，不要塞进一个
<kbd>里——<kbd>Ctrl+C</kbd>是错的，会丢失语义和可访问性 - 大小写敏感：写
<kbd>Shift</kbd>而不是<kbd>shift</kbd>，系统级快捷键习惯大写首字母 - Mac 用户看到
<kbd>Cmd</kbd>比<kbd>Ctrl</kbd>更自然，但别用<kbd>⌘</kbd>符号——它不是标准字符，复制粘贴易出错，也难被辅助工具识别
为什么不用 <code> 或 <span>
<code> 表示计算机代码片段，比如函数名、命令行输入；<span> 是无语义容器。两者都不能告诉浏览器“这是用户要按的键”，AT（辅助技术）会忽略或误读。
- 用
<code>Ctrl+C</code>：屏幕阅读器可能读成 “C T R plus C”，而不是“Control-C” - 用
<span class="key">Ctrl</span>：完全没语义，CSS 再好看也没法被无障碍 API 捕获 -
<kbd>是 HTML Living Standard 明确定义的交互语义标签，兼容所有现代浏览器和主流读屏软件（NVDA、VoiceOver、JAWS）
<kbd> 在真实文档里的典型用法
常见于帮助文档、设置说明、CLI 工具网页版提示。重点是「用户动作」而非「系统反馈」——比如“按
<kbd>Esc</kbd> 关闭弹窗”，不是“程序返回 <code><kbd>ESC</kbd> 字符”。</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill8272" title="anything-to-html"><img
src="https://img.php.cn/upload/skill/000/000/081/179195588450431.jpg" alt="anything-to-html" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill8272" title="anything-to-html">anything-to-html</a>
<p>将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。</p>
</div>
<a href="/xiazai/skill8272" title="anything-to-html" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>
<ul>
<li>嵌套合法：<code><kbd><kbd>Ctrl</kbd>+<kbd>Alt</kbd>+<kbd>Del</kbd></kbd>（外层 <kbd> 表示整个组合操作）
<p>在终端中输入 <code>git commit</code> 后，按 <kbd>Ctrl</kbd>+<kbd>D</kbd> 退出编辑器。</p>
<kbd>，那是导航路径，不是按键容易被忽略的细节和兼容性问题
多数人写了 <kbd> 就以为完事了，但实际部署时有两个隐形坑：
立即学习“前端免费学习笔记（深入）”；
- CSS 重置可能干掉默认样式：某些 UI 框架（如 Bootstrap）或全局
kbd { font-family: inherit; background: none; }会让<kbd>看起来和普通文字一样——务必检查渲染效果，必要时手动补kbd { font-family: ui-monospace, monospace; padding: 2px 4px; border-radius: 3px; background-color: #f0f0f0; } - 移动端没有物理键盘，但
<kbd>仍需保留：iOS/Android 的屏幕阅读器（VoiceOver/TalkBack）依然能正确解析并朗读，对视障用户操作触控界面有帮助
