正确写法是用独立<kbd>标签包裹各按键，如<kbd>Ctrl</kbd> + <kbd>C</kbd>，确保语义准确、屏幕阅读器可识别组合关系，禁用嵌套或连写；CSS需用em单位、浅灰背景提升可读性；交互控件须添加aria-keyshortcuts属性。
在HTML5教程文档中用标签高亮Ctrl+C这类组合键，关键不是“让它看起来像按键”，而是让语义准确、屏幕阅读器可理解、视觉上清晰可辨。直接写Ctrl+C是常见错误，它会被读作“C T R plus C”，而非“Control-C”。
组合键必须拆开写，用+号分隔
修饰键（Ctrl、Shift、Cmd、Alt）和主键（C、S、Enter）应各自包裹在独立的标签中，中间用纯文本的+连接。这样既符合W3C语义规范，也确保辅助技术正确解析为组合操作。
- ✅ 正确：
<p>按 <kbd>Ctrl</kbd> + <kbd>C</kbd> 复制内容</p> - ✅ 跨平台写法：
<kbd>Cmd</kbd> / <kbd>Ctrl</kbd> + <kbd>V</kbd>（斜杠在外，不嵌套） - ❌ 错误：
<kbd>Ctrl+C</kbd>（语义丢失，读屏器无法识别组合关系） - ❌ 错误：
<kbd><kbd>Ctrl</kbd><kbd>C</kbd></kbd>（嵌套过度，非标准用法，部分阅读器支持差）
用CSS美化成“真实按键”样式
浏览器对默认渲染极简，仅设等宽字体。需手动加CSS提升识别度，但避免炫技，专注可读性与一致性。
推荐基础样式（适配缩放、高对比度模式）：
立即学习“前端免费学习笔记（深入）”；
kbd {
font-family: ui-monospace, 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
font-size: 0.875em;
padding: 2px 6px;
border: 1px solid #aaa;
border-radius: 4px;
background-color: #f5f5f5;
color: #333;
}
- 用
em单位保证缩放友好，别用px - 背景色选浅灰（如
#f5f5f5），避免黑底白字造成眩光 - Mac用户习惯看到⌘符号，可用
::before伪元素添加，但必须保留文本内容（如<kbd>Cmd</kbd>），否则屏幕阅读器读不到
补充交互语义：aria-keyshortcuts不能少
标签只负责“展示”，不提供快捷键功能。如果教程中描述的是可触发操作的快捷键（比如“按 Ctrl+S 保存文档”），对应按钮或菜单项还必须声明aria-keyshortcuts属性。
- ✅ 正确示例（用于保存按钮）：
<button aria-keyshortcuts="Ctrl+S">保存</button> - ✅ 单键写法：
aria-keyshortcuts="Escape"（大小写敏感，用标准键名） - ❌ 不要写空格分隔：
"Ctrl Shift S"无效，必须用"Ctrl+Shift+S" - 搭配动词说明更友好，例如：
按 <kbd>Ctrl</kbd> + <kbd>S</kbd> 保存当前页面
序列与平台差异的写法建议
涉及多步操作或系统差异时，结构要明确，不依赖样式堆砌。
- 按键序列（如关闭全屏）：
<kbd>Esc</kbd> → <kbd>Tab</kbd> → <kbd>Enter</kbd>（用箭头分隔，不嵌套） - 平台差异标注放在外层文字中，不塞进：
macOS 上为 <kbd>Cmd</kbd> + <kbd>Q</kbd>，Windows 上为 <kbd>Ctrl</kbd> + <kbd>Q</kbd> - 避免Unicode图标混入标签内（如
<kbd>⌘+C</kbd>），复制粘贴易出错，且破坏语义
