是唯一语义正确、无障碍友好的键盘按键标记方式；仅当描述用户需按下物理键（如ctrl+s）时使用，命令、函数名等一律用。
<kbd></kbd> 是唯一语义正确、无障碍友好的键盘按键标记方式，别用 <code> 或纯文本凑合。
什么时候必须用 <kbd></kbd> 而不是 <code>
只在描述「用户需按下物理键」时才用 <kbd></kbd>；命令、路径、函数名一律用 <code>。
-
<kbd>Ctrl</kbd> + <kbd>S</kbd>✅ 用户真要按这两个键 -
<code>git commit -m "msg"✅ 这是命令行输入，不是击键动作 -
<code>fetch()✅ 函数名，跟键盘无关 -
<kbd>npm install</kbd>❌ 不是按键，是命令，该用<code>
<kbd></kbd> 组合键的写法陷阱
修饰键（Ctrl、Shift、Cmd、Alt）和主键（S、F5、Enter）必须拆开，加号/斜杠/空格写在标签外。
- ✅ 正确：
<p>按 <kbd>Cmd</kbd> / <kbd>Ctrl</kbd> + <kbd>R</kbd> 刷新</p> - ❌ 错误：
<kbd>Cmd+R</kbd>（语义丢失，读屏器读成 “C M D plus R”） - ❌ 错误：
<kbd>Cmd <kbd>R</kbd></kbd>（非法嵌套，HTML 验证失败） - ⚠️ 注意：
<kbd>Space</kbd>表示空格键，不是空格字符；<kbd>Esc</kbd>不写Escape或↵
CSS 美化时最容易破坏可访问性的三件事
改样式可以，但别让按键“看不见”或“读不出”。
- 去掉
border和background后视觉无区分——至少保留background: #f0f0f0+padding: 2px 8px - 设了
display: inline-flex却没加align-items: center，导致<kbd>Alt</kbd><kbd>F4</kbd>垂直错位 - 用颜色暗示功能（比如红键=危险），但色弱用户无法分辨——补上文字标注或图标
- 小屏幕下按键过密：加
min-width: 24px，确保触控热区足够
最常被忽略的是：Mac 和 Windows 用户看到的修饰键不同，静态页面别硬写死 <kbd>Ctrl</kbd>，并列写 <kbd>Ctrl</kbd>/<kbd>Cmd</kbd> 更稳妥；动态替换需要 JS 检测 navigator.platform，但多数帮助页没必要搞那么重。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
