用于机器可读的源代码（如fetch()、class="btn"），专指用户需按下的物理按键或组合键（如ctrl+s）；二者语义严格区分，混用会损害可访问性与seo。
<code> 表示机器可读的源代码文本，<kbd></kbd> 表示用户需手动输入的键盘操作 —— 二者语义完全不同，混用会导致可访问性下降、搜索引擎误解内容意图，甚至影响屏幕阅读器对交互逻辑的判断。
什么时候该用 <code>
当你展示的是程序里真正会执行或被解析的代码片段时，比如函数调用、变量声明、HTML 属性值、CSS 声明块等。它强调“这段文字是代码，不是普通文本”。
- 适用场景：
console.log("hello")、fetch()、class="btn"、display: flex - 不要用于纯描述性文字，例如“点击按钮”或“输入用户名”，哪怕它出现在代码教程里
- 浏览器默认用等宽字体渲染，但样式可被 CSS 覆盖；语义才是核心，不是字体效果
- 嵌套在
<pre class="brush:php;toolbar:false;"></pre>中可保留缩进和换行，单独使用则按行内元素处理空格
什么时候该用 <kbd></kbd>
当你想明确告诉用户“请用键盘按下这个组合键或单个键”时。它代表的是人机交互动作，不是代码本身。
- 适用场景：
<kbd>Ctrl</kbd>+<kbd>S</kbd>、<kbd>Enter</kbd>、<kbd>F12</kbd> - 不能用来包裹变量名、函数名或命令行指令（如
git commit），那是<code>的职责 - 多个按键之间建议用
+连接，而非空格；每个键单独套一层<kbd></kbd>更利于辅助技术识别 - CSS 可以加背景色/边框模拟物理按键，但别改掉它的语义角色
常见错误：把 <kbd></kbd> 当成“等宽字体开关”
有人看到 <code> 和 <kbd></kbd> 都显示为等宽字体，就拿 <kbd></kbd> 来格式化命令行输入示例，比如写成 <kbd>npm install</kbd>。这不对。
- 错误现象：屏幕阅读器会读作 “kay bee dee npm install”，而不是“npm install”
- 正确写法：
运行 <code>npm install安装依赖；调试时按 F12 打开开发者工具 - 混淆后果：W3C 验证器不报错，但语义错误无法通过自动化工具检测，只有人工审查或辅助技术使用者才能发现
- 兼容性无问题，但可访问性标准（如 WCAG 1.3.1）明确要求内容角色与呈现一致
复杂点常被忽略：嵌套与组合逻辑
真实文档中经常出现“在终端输入某命令，其中某个参数要按某键确认”，这时需要分层表达语义，不能全塞进一个标签。
- 错误：
<kbd>curl -X POST http://api.com && Enter</kbd>—— 把 URL 和操作混在一起 - 正确：
执行 <code>curl -X POST http://api.com，然后按 Enter 发送 - 更严谨的交互说明还可配合
<var></var>标出变量位置，例如：<code>git checkout <var>branch-name</var> - 注意：不要为了“看起来整齐”而牺牲语义分层，HTML 不是排版工具，而是信息结构载体
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
