<code>标签仅适用于单行内联代码，不支持换行缩进；多行代码须用<pre><code>组合，且不可嵌套块级元素。
code标签只适合内联代码，不能换行或缩进
<code> 是 HTML 的内联元素，语义上表示一段短代码片段，比如函数名、变量名或命令。它默认不支持换行、缩进或语法高亮——这些得靠 CSS 或额外工具实现。直接往 <code> 里塞多行内容，浏览器会把换行符当空格处理，显示成一长串挤在一起的文本。
常见错误是这么写：
<code>
function hello() {
console.log('hi');
}
</code>
结果所有内容被压成一行：function hello() { console.log('hi'); }，可读性极差。
- 单行代码才用
<code>，例如console.log()、useState、git clone - 需要保留格式（缩进/换行）时，改用
<pre><code>组合 -
<code>内部不要嵌套块级元素（如<p>、<div>），会触发 HTML 解析错误
单行代码怎么写才正确又清晰
关键是内容简洁、语义准确、视觉可辨。比如描述一个 JavaScript 方法调用，直接写：
立即学习“前端免费学习笔记（深入）”；
<p>调用 <code>fetch('/api/data')</code> 获取数据。</p>
浏览器渲染后，“fetch('/api/data')” 会以等宽字体显示，且与周围文字自然对齐。
- 路径、参数、字符串字面量都算合法内容，例如
/usr/bin/env、JSON.stringify(obj) - 避免在
<code>里放 HTML 实体（如），除非你真想显示符号本身；要显示 <code> 就写 <code> - 如果代码含单引号或双引号，确保属性值引号不冲突，比如：
<code>document.querySelector('.active')</code>用单引号包裹选择器更安全
样式微调能让单行代码更易读
原生 <code> 只有基础等宽字体，但实际项目中常需调整背景、边距或颜色。加一行 CSS 就能解决：
code {
background-color: #f6f6f6;
padding: 2px 4px;
border-radius: 3px;
font-size: 0.95em;
}
这样 console.error() 这类调用看起来更像“代码块”，而不是普通文本。
- 别用
display: block强制让<code>换行——它就不是干这个的，破坏内联语义 - 移动端要注意
font-size太小导致难以识别，建议不低于14px - 深色主题下记得同步改
background-color和color，否则文字可能看不见
什么时候不该用 code 标签
看到代码就套 <code> 是常见误区。它只适用于「程序语言中的标识符或表达式」，不是所有技术名词都适用。
错误用法：
- 产品名：❌
<code>React</code>→ ✅ 直接写 React（或用<strong>强调） - 文件名（无上下文）：❌
<code>package.json</code>→ ✅ 可以，但如果是强调配置项，更推荐<code>scripts</code>这种具体字段 - 命令行输出：❌
<code>npm install succeeded</code>→ ✅ 输出内容该用<pre><code>，状态描述用普通文本
核心判断标准：这段文字是否在代码中真实出现、且作为可执行/可引用的单元？如果不是，就别硬套 <code>。
真正容易被忽略的是语义边界——<code> 不是“看起来像代码就行”，而是“它就是代码”。越靠近这个本质，HTML 结构越干净，后续做无障碍访问或自动化提取也越可靠。
