标签仅适用于单行内联代码，不支持换行缩进；多行代码须用组合，且不可嵌套块级元素。

code标签只适合内联代码，不能换行或缩进

<code> 是 HTML 的内联元素，语义上表示一段短代码片段，比如函数名、变量名或命令。它默认不支持换行、缩进或语法高亮——这些得靠 CSS 或额外工具实现。直接往 <code> 里塞多行内容，浏览器会把换行符当空格处理，显示成一长串挤在一起的文本。

常见错误是这么写：

<code>
function hello() {
  console.log('hi');
}
</code>

结果所有内容被压成一行：function hello() { console.log('hi'); }，可读性极差。

• 单行代码才用 <code>，例如 console.log()、useState、git clone
• 需要保留格式（缩进/换行）时，改用 <pre class="brush:php;toolbar:false;">&lt;code&gt;&lt;/code&gt; 组合</pre>
• <code> 内部不要嵌套块级元素（如 <p></p>、<div>），会触发 HTML 解析错误 <h3>单行代码怎么写才正确又清晰</h3> <p>关键是内容简洁、语义准确、视觉可辨。比如描述一个 JavaScript 方法调用，直接写：</p> <pre class="brush:php;toolbar:false;">&lt;p&gt;调用 &lt;code&gt;fetch('/api/data')&lt;/code&gt; 获取数据。&lt;/p&gt;</pre> <p>浏览器渲染后，“<code>fetch('/api/data')” 会以等宽字体显示，且与周围文字自然对齐。
  

  Wechat HTML Publisher

  直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

  下载
  • 路径、参数、字符串字面量都算合法内容，例如 /usr/bin/env、JSON.stringify(obj)
  • 避免在 <code> 里放 HTML 实体（如 <），除非你真想显示符号本身；要显示 就写 <code><
  • 如果代码含单引号或双引号，确保属性值引号不冲突，比如：<code>document.querySelector('.active') 用单引号包裹选择器更安全

  样式微调能让单行代码更易读

  原生 <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 → ✅ 直接写 React（或用 <strong></strong> 强调）
  • 文件名（无上下文）：❌ <code>package.json → ✅ 可以，但如果是强调配置项，更推荐 <code>scripts 这种具体字段
  • 命令行输出：❌ <code>npm install succeeded → ✅ 输出内容该用 <pre class="brush:php;toolbar:false;">&lt;code&gt;&lt;/code&gt;，状态描述用普通文本</pre>

  核心判断标准：这段文字是否在代码中真实出现、且作为可执行/可引用的单元？如果不是，就别硬套 <code>。

  真正容易被忽略的是语义边界——<code> 不是“看起来像代码就行”，而是“它就是代码”。越靠近这个本质，HTML 结构越干净，后续做无障碍访问或自动化提取也越可靠。