标签仅用于表示用户需按下的物理按键，不可用于命令、函数名或鼠标操作；组合键须拆分修饰键与主键并用外部符号连接，且需手动修复css以保障无障碍支持。
必须用 <kbd></kbd> 标签，不能用 <code> 或纯文本模拟——否则屏幕阅读器读不准、搜索引擎分不清、无障碍检测直接报错。
为什么 <kbd></kbd> 不能套命令或函数名
它只表示「人要按的物理键」，不是代码、不是输出、不是描述。常见翻车点：
-
<kbd>git commit</kbd>❌ —— 这是命令，该用<code> -
<kbd>fetch()</kbd>❌ —— 这是函数名，也该用<code> -
<kbd>点击保存</kbd>❌ —— 这是鼠标动作，不该用<kbd></kbd> -
<kbd>Ctrl+S</kbd>❌ —— 符号塞进一个标签，语义断裂，无法单独样式化 Ctrl 和 S
<kbd></kbd> 组合键怎么写才对
修饰键和主键必须拆开，分隔符（+ / 空格）写在标签外部：
- ✅ 正确：
<p>保存文件：<kbd>Ctrl</kbd> + <kbd>S</kbd></p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill5806" title="html-deploy"><img src="https://img.php.cn/upload/skill/000/000/081/179066538882434.jpg" alt="html-deploy" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill5806" title="html-deploy" class="overflowclass">html-deploy</a> <p class="overflowclass">使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。</p> </div> <a rel="nofollow" href="/xiazai/skill5806" title="html-deploy" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> - ✅ Mac 场景：
<p>刷新页面：<kbd>Cmd</kbd> + <kbd>R</kbd></p>（别用<kbd>⌘</kbd>，复制粘贴易丢字符，VoiceOver 支持不稳定） - ✅ 同时按下（无释放间隙）：
<kbd>Alt</kbd><kbd>F4</kbd>（不加 +，更贴近真实操作逻辑） - ✅ 跨平台提示：
<kbd>Cmd</kbd> / <kbd>Ctrl</kbd> + <kbd>T</kbd>
CSS 美化前先检查默认样式是否被干掉
很多 UI 框架（比如 Bootstrap、Tailwind 的某些重置）会把 <kbd></kbd> 的默认等宽、浅灰背景清空，结果渲染出来跟普通文字一模一样。务必手动补基础样式：
kbd {
display: inline-block;
padding: 2px 6px;
min-width: 20px;
background-color: #f0f0f0;
border: 1px solid #ccc;
border-radius: 3px;
font-family: ui-monospace, monospace;
font-size: 0.9em;
line-height: 1.4;
vertical-align: middle;
}
注意：移动端也要保留——VoiceOver 和 TalkBack 仍依赖 <kbd></kbd> 的语义朗读，哪怕用户没物理键盘。
最容易被忽略的是样式重置和大小写规范：Shift 不是 shift，Enter 不是 return，写错就失去语义一致性；而一旦用了 CSS 框架，<kbd></kbd> 往往静默失效，得靠开发者主动验视渲染结果。
