<code>标签仅语义化声明内联代码片段，需手动设置等宽字体、处理空白符、转义HTML字符，并配合<var>、<kbd>等标签明确角色，不可滥用为样式钩子或脱离合法上下文。
<code> 标签不是代码高亮工具，也不是多行容器——它只负责语义化地声明“这是一个内联代码片段”，其余格式、转义、可访问性全靠你手动补全。
什么时候该用 <code>，而不是 <pre><code>
核心判断：这段代码是否天然适合嵌在一句话里？比如函数名、参数名、命令、路径、变量名。
- ✅ 适合：
fetch()发起请求时传入AbortSignal.timeout(5000)；配置项写在package.json的scripts字段里 - ❌ 不适合：展示一个带缩进的 JSON 配置、一段含换行的 Bash 脚本、或 HTML 片段本身（如
<div class="card">）——这些必须先转义<和>，再套进<pre><code> - ⚠️ 常见误用：把
<code>console.log('hi');</code>直接塞进段落，结果渲染成一行且无等宽字体，语义对但体验差
<code> 必须配合的三件事
浏览器不会自动帮你做这些，漏一项就可能让代码不可读、不可复制、甚至破坏 DOM。
- 显式设置
font-family: monospace，否则默认用衬线字体，数字0和字母O难区分 - 加
white-space: nowrap或overflow-x: auto，防长命令（如git log --oneline --graph --all --simplify-by-decoration）在小屏上折行错乱 - 所有 HTML 特殊字符必须手动转义：
<→，<code>>→>，&→&；否则<img src="x">会被解析为真实标签，后面内容消失
和 <var>、<kbd> 搭配用才真正语义清晰
单独用 <code> 只能说明“这是代码”，但无法区分角色。实际文档中常需混合表达：
立即学习“前端免费学习笔记（深入）”；
-
<var>baseUrl</var>+<code>fetch()</code>：变量名用<var>，函数名用<code> - 用户要输入的内容用
<kbd>Ctrl+C</kbd>，程序输出用<samp>Error: ENOENT</samp>，而关键标识符（如错误码ENOENT）仍归<code> - 避免把
<code>当样式钩子滥用：比如给它加background: #f5f5f5却不设padding和border-radius，导致相邻标点粘连（如run <code>npm test. 中句号紧贴右括号）
最易被忽略的是：哪怕只用一次 <code>，也得确认它没出现在 <p> 外的上下文中——比如直接挂在 <body> 下，或嵌在未闭合的 <li> 里。这类结构错误不会报错，但会让屏幕阅读器跳过或误读，且后续 JS 查询 document.querySelectorAll('code') 时节点顺序与预期不符。
