标签是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→
配合文字说明，避免歧义
只负责呈现“按键形态”，不解释功能。务必搭配简明动词短语，让用户知道为什么按、何时按：
- ✅ 好：“点击保存按钮后，按 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></menuitem>或普通文本+箭头符号 - 不包裹鼠标操作（如“点击×按钮”），鼠标动作不属于键盘输入，用
<button></button>或描述性文字更合适 - 不替代代码块：命令行指令（如
git commit -m "msg"）应使用<code>，仅限真实按键
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
