标签用于语义化标记用户应按的键盘按键，本身无默认按键样式，需配合css实现视觉识别；单个键如enter，组合键须分写如ctrl+c，确保可访问性与跨平台一致性。
用 <kbd></kbd> 标签标记键盘按键，本身不产生“真实按键”外观，必须配合 CSS 才能视觉上接近物理按键。核心不是追求酷炫，而是让文字可辨、层级清晰、跨平台一致、辅助技术可读。
基础语义写法：先写对，再美化
<kbd></kbd> 是纯语义标签，只表示“这是用户要按的键”，不监听、不聚焦、不交互。正确结构决定可访问性：
- 单个键：
<kbd>Enter</kbd>、<kbd>↑</kbd> - 组合键：用嵌套表达逻辑关系——
<kbd><kbd>Ctrl</kbd><kbd>S</kbd></kbd>（外层代表整个快捷操作，内层各为独立按键） - 平台差异：写成
<kbd>Cmd</kbd> / <kbd>Ctrl</kbd> + <kbd>C</kbd>，斜杠在外，不塞进同一个<kbd></kbd> - 按键序列：用箭头或空格分隔，如
<kbd>Esc</kbd> → <kbd>Tab</kbd> → <kbd>Enter</kbd>，不嵌套
CSS美化要点：模拟按键的质感与节奏
浏览器默认样式极简（仅等宽字体），甚至在某些框架中被清空。推荐一套兼顾可读性、WCAG 对比度和系统习惯的基础样式：
kbd {
font-family: ui-monospace, 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
font-size: 0.875em;
line-height: 1.4;
padding: 2px 6px;
border: 1px solid #ccc;
border-radius: 4px;
background-color: #f0f0f0;
color: #333;
}
关键细节说明：
- 用
ui-monospace优先调用系统等宽字体，比硬写Consolas更适配 macOS/iOS/Windows -
padding: 2px 6px避免文字贴边，小字号下尤其重要；别设padding: 0，否则 Mac 上 ⌘ 符号易被裁切 - 背景色选
#f0f0f0或#e0e0e0，比纯白更有按键“面感”，又不会像#000那样眩光 - 禁用
font-weight: bold除非必要——加粗可能让小写字母（如s、a）变形失真
跨平台与可访问性避坑指南
美化不能以牺牲语义和兼容性为代价：
- 别用 SVG 或伪元素替换 Cmd/Control 图标来“图省事”，例如
<kbd>⌘+C</kbd>。应保留文本内容，屏幕阅读器才读得出“Command C” - 修饰键（Ctrl/Cmd/Shift/Alt/Option）必须单独包裹，
<kbd>Ctrl+S</kbd>会被读成 “C T R S”，而非“Control S” - 不给
<kbd></kbd>加tabindex或outline：它本不可聚焦，强行添加会干扰键盘导航流 - 避免与
<code>、<samp></samp>混用——<code>fetch()是代码，<kbd>Ctrl+C</kbd>是动作，语义不同，读屏器识别逻辑也不同
编辑器提效技巧：少敲代码，多保语义
频繁写快捷键时，手动敲标签效率低，可用以下方式提速：
- VS Code：配置用户 snippet，输入
kbd自动展开为<kbd>$1</kbd>，光标停在中间 - Typora/Obsidian：开启 HTML 内联支持后，直接输入
<kbd>Ctrl</kbd> + <kbd>V</kbd>即实时渲染 - WordPress 古腾堡：默认过滤
<kbd></kbd>，需在主题functions.php中用wp_kses_allowed_html()显式放开 - 富文本编辑器（如 TinyMCE）：检查
valid_elements配置，确保kbd[|]被允许
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
