是HTML5中用于标记键盘输入的语义化元素，具有默认样式但可通过CSS美化为真实键盘质感，需注意嵌套规范、响应式适配及可访问性要求。
标签是HTML5中专门用于标记键盘输入或快捷键的语义化元素，比如 Ctrl + S。它本身有默认浏览器样式（通常为等宽、浅灰背景、带边框），但可通过CSS精细控制外观，提升可读性与设计一致性。
基础用法：正确嵌套与组合快捷键
单个按键直接用 包裹，组合键推荐用多个 嵌套在普通文本中，避免语义混淆。不建议用 包裹非按键内容（如“点击”“选择”）。
- ✅ 正确：
Ctrl + Shift + T - ✅ 多键同时按下：
AltF4（注意无加号更符合真实操作逻辑） - ❌ 错误：
点击保存按钮（这不是键盘输入）
CSS美化：还原真实键盘质感
默认样式较简陋，可通过CSS模拟物理键盘视觉特征：圆角、阴影、按键高度、键帽颜色、字体粗细与居中对齐。
- 设置 为行内块级，统一尺寸和垂直对齐：
display: inline-block; line-height: 1.4; vertical-align: middle; - 添加类名（如
.key）便于复用，避免污染全局 样式 - 模拟键帽立体感：用
box-shadow: inset 0 -2px 0 rgba(0,0,0,0.2)做按压阴影，background: #f0f0f0作底色，border: 1px solid #ccc - 区分修饰键（Ctrl/Shift）与字符键：可用
.key.modifier { background: #e6e6e6; font-weight: bold; }
响应式与可访问性注意事项
美化不能牺牲可用性。小屏幕下按键过密易误触，色弱用户可能难以分辨按键状态。
- 最小宽度设为
min-width: 24px，配合padding: 2px 8px保证点击热区 - 文字颜色与背景对比度 ≥ 4.5:1（如深灰文字 #333 在浅灰背景上）
- 保留:focus样式，支持键盘导航用户；可加
outline: 2px solid #007aff（蓝色高亮） - 避免纯靠颜色传达信息（例如“红色=危险键”），改用图标或文字标注
实用示例：一段带样式的快捷键说明
HTML片段：
保存文档：CtrlS
新建标签页：CtrlShiftT
CSS片段（精简版）：
.key {display: inline-block;
padding: 2px 8px;
min-width: 24px;
background: #f0f0f0;
border: 1px solid #ccc;
border-radius: 4px;
font-family: system-ui, sans-serif;
font-size: 0.9em;
line-height: 1.4;
vertical-align: middle;
box-shadow: inset 0 -1px 0 rgba(0,0,0,0.1);
}
.key.modifier {
background: #e6e6e6;
font-weight: 600;
}
.key:focus {
outline: 2px solid #007aff;
outline-offset: 2px;
}
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
