p 中嵌套 code 合法，适用于短小代码片段；多行代码须用 pre+code；需手动转义 HTML 字符；code 是行内元素，不保留换行缩进；语义优先，避免滥用 class 模拟或嵌套非标准标签。

直接在 p 里写 code 标签就行，但要注意语义和转义

HTML 允许 p 嵌套 code，这是完全合法的写法，比如显示一个变量名或命令片段：

<p>运行 <code>npm install</code> 安装依赖。</p>

但注意：如果 code 里要显示 HTML 字符（比如 <div>），必须手动转义 <code> 和 <code>>，否则浏览器会把它当真实标签解析——<code><div> 才能正确显示成 <div>。 <h3>别用 <code>code 包含多行代码或缩进内容

code 是行内元素，不保留换行和多余空格，所以：

• 写 <p><code>function a() {<br>  return 1;
  

  Wechat Article Html

  将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。

  下载
  不会换行、也不会保留缩进
• 想展示真实格式的多行代码，该用 pre + code 组合：

  <pre class="brush:php;toolbar:false;"><code>function a() {<br>  return 1;<br>}</code>

• 单独用 p + code 只适合短小、无格式要求的代码片段，比如函数名 map、文件名 package.json、命令 git commit

样式上 code 默认是等宽字体，但可能被 CSS 覆盖

浏览器默认给 code 加了 font-family: monospace，但如果你的项目全局重写了 font-family，或者父级 p 设了 font-family，它可能失效。检查方式很简单：

立即学习“前端免费学习笔记（深入）”；

• 打开开发者工具，选中 code 元素，看 font-family 计算值是不是等宽字体（如 Consolas, monospace）
• 必要时加一行 CSS 强制恢复：

  code { font-family: ui-monospace, SFMono-Regular, 'SF Mono', Consolas, 'Liberation Mono', Menlo, monospace; }

• 别只靠 class 名（比如 class="code"）来模拟语义，原生 code 标签对可访问性和 SEO 更友好

常见错误：把 code 当作「高亮」或「块级容器」来用

有人误以为 code 能自动语法高亮，或能像 div 那样随便塞子元素——其实都不能：

• code 里不能嵌套 span 做颜色区分（除非你额外加 JS 或 CSS 模拟，但语义已破坏）
• 不要写 <code><span class="keyword">function</span> foo()，这违反 HTML 规范，部分屏幕阅读器会读错
• 真要高亮，应该用支持语法高亮的库（如 highlight.js、Prism），它们会在 pre + code 外层注入结构，而不是往 code 里面硬塞标签
• 如果只是想加背景色或边框，直接给 code 加 CSS 即可，比如 code { background: #f5f5f5; padding: 2px 4px; border-radius: 3px; }

真正容易被忽略的是：语义比样式更重要。哪怕你把 code 渲染得再像 IDE，只要它没出现在 pre 里、又没包裹真正的代码文本，搜索引擎和辅助技术就很难识别出“这是代码”。