<kbd>标签是HTML5中专用于标记键盘输入的语义化元素，适用于新手引导文档，默认具浅灰背景与圆角边框，需单独包裹每个按键、组合键嵌套使用，并配合动词短语说明操作上下文与目的。

标签是HTML5中专门用于标记用户键盘输入的语义化元素，非常适合在新手引导文档中清晰、直观地呈现按键操作，比如 Ctrl + C 或 Esc。它默认有浏览器内置的浅灰背景和圆角边框（各浏览器略有差异），视觉上天然区别于普通文本，无需额外CSS就能传递“这是要按的键”的信号。

用准确包裹单个按键或组合键

每个独立按键都应单独套一层，组合操作则嵌套使用，保持语义清晰：

• 单键：写成 <kbd>Enter</kbd> → Enter
• 修饰键 + 字符键：写成 <kbd>Ctrl</kbd><kbd>S</kbd> → CtrlS（注意中间无加号，加号属于说明文字）
• 带符号键：如 <kbd>Alt</kbd><kbd>Tab</kbd> → AltTab；<kbd>Shift</kbd><kbd>→</kbd> → Shift→

配合文字说明，避免歧义

只负责呈现“按键形态”，不解释功能。务必搭配简明动词短语，让用户知道为什么按、何时按：

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

• ✅ 好：“点击保存按钮后，按 CtrlS 快速保存当前设置”
• ❌ 模糊：“按 CtrlS”——没说明上下文和目的
• ⚠️ 注意：Mac用户习惯用 Cmd 替代 Ctrl，可并列标注：CtrlS 或 CmdS

必要时微调样式提升可读性

浏览器默认样式较朴素，若文档整体设计感强，可用轻量CSS优化视觉一致性：

立即学习“前端免费学习笔记（深入）”；

• 统一字体：防止系统等宽字体缺失导致变形，例如 font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
• 增强对比：轻微加深背景色或调整边框，如 background: #f0f0f0; border: 1px solid #ccc;
• 组合键间距：给相邻间加 margin-left: 4px，避免粘连，如 CtrlS

避开常见误用

不是装饰标签，滥用会损害可访问性和语义准确性：

• 不用来标记菜单项（如“文件 > 另存为”），该用 <menuitem> 或普通文本+箭头符号
• 不包裹鼠标操作（如“点击×按钮”），鼠标动作不属于键盘输入，用 <button> 或描述性文字更合适
• 不替代代码块：命令行指令（如 git commit -m "msg"）应使用 <code>，仅限真实按键