正确写法是用独立标签包裹各按键，如Ctrl + C，确保语义准确、屏幕阅读器可识别组合关系，禁用嵌套或连写；CSS需用em单位、浅灰背景提升可读性；交互控件须添加aria-keyshortcuts属性。
在HTML5教程文档中用标签高亮Ctrl+C这类组合键，关键不是“让它看起来像按键”，而是让语义准确、屏幕阅读器可理解、视觉上清晰可辨。直接写Ctrl+C是常见错误，它会被读作“C T R plus C”，而非“Control-C”。
组合键必须拆开写，用+号分隔
修饰键（Ctrl、Shift、Cmd、Alt）和主键（C、S、Enter）应各自包裹在独立的标签中，中间用纯文本的+连接。这样既符合W3C语义规范，也确保辅助技术正确解析为组合操作。
- ✅ 正确：
按 Ctrl + C 复制内容
- ✅ 跨平台写法：
Cmd / Ctrl + V（斜杠在外，不嵌套） - ❌ 错误：
Ctrl+C（语义丢失，读屏器无法识别组合关系） - ❌ 错误：
CtrlC（嵌套过度，非标准用法，部分阅读器支持差）
用CSS美化成“真实按键”样式
浏览器对默认渲染极简，仅设等宽字体。需手动加CSS提升识别度，但避免炫技，专注可读性与一致性。
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
推荐基础样式（适配缩放、高对比度模式）：
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伪元素添加，但必须保留文本内容（如Cmd），否则屏幕阅读器读不到
补充交互语义：aria-keyshortcuts不能少
标签只负责“展示”，不提供快捷键功能。如果教程中描述的是可触发操作的快捷键（比如“按 Ctrl+S 保存文档”），对应按钮或菜单项还必须声明aria-keyshortcuts属性。
- ✅ 正确示例（用于保存按钮）：
- ✅ 单键写法：
aria-keyshortcuts="Escape"（大小写敏感，用标准键名） - ❌ 不要写空格分隔：
"Ctrl Shift S"无效，必须用"Ctrl+Shift+S" - 搭配动词说明更友好，例如：
按 Ctrl + S 保存当前页面
序列与平台差异的写法建议
涉及多步操作或系统差异时，结构要明确，不依赖样式堆砌。
- 按键序列（如关闭全屏）：
Esc → Tab → Enter（用箭头分隔，不嵌套） - 平台差异标注放在外层文字中，不塞进：
macOS 上为 Cmd + Q，Windows 上为 Ctrl + Q - 避免Unicode图标混入标签内（如
⌘+C），复制粘贴易出错，且破坏语义
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
