仅保留空白字符，不定义结构或语义，不能作为容器使用；应与配合表示代码，需配合等宽字体css确保中文对齐。

<pre class="brush:php;toolbar:false;"></pre> 标签本身不定义结构，只保留空白字符 —— 它不是容器语义元素，也不隐含层级或数据关系。

为什么 <pre class="brush:php;toolbar:false;"></pre> 不能当结构化容器用

它只做一件事：告诉浏览器“别合并空格、别忽略换行”。HTML 解析器对 <pre class="brush:php;toolbar:false;"></pre> 内容不做语义解析，<pre class="brush:php;toolbar:false;"></pre> 里的 <div>、<code><p></p> 或 <ul></ul> 不会被当作结构节点处理，而是当成普通子内容渲染。常见错误现象：<pre class="brush:php;toolbar:false;"></pre> <ul><li>a</li></ul> 会把 <ul></ul> 当纯文本显示，而不是渲染成列表。

• 想表达代码块结构？用 <pre class="brush:php;toolbar:false;"></pre> + <code>，后者才是语义化代码容器
• 想组织多段预格式文本？必须在外层用 <section></section> 或 <article></article> 包裹多个 <pre class="brush:php;toolbar:false;"></pre>
• <pre class="brush:php;toolbar:false;"></pre> 内部嵌套块级元素（如 <div>）会破坏空白保留逻辑 —— 换行和缩进可能失效 <h3> <code><pre class="brush:php;toolbar:false;"></pre> 和 <code> 的分工必须分清

  <code> 是语义标签，表示“这段是计算机代码”；<pre class="brush:php;toolbar:false;"></pre> 是格式标签，负责撑开换行与空格。二者常配合，但不可互换。单独用 <code> 不保留缩进，单独用 <pre class="brush:php;toolbar:false;"></pre> 不传达代码语义。

  

  Wechat HTML Publisher

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

  下载
  • 正确写法：<pre class="brush:php;toolbar:false;">&lt;code class=&quot;js&quot;&gt;function foo() {&lt;br&gt;  return true;&lt;br&gt;}&lt;/code&gt;</pre>
  • 错误写法：<pre class="js">function foo() {&lt;br&gt;  return true;&lt;br&gt;}</pre>（class 无效，无语义，无法被语法高亮工具识别）
  • 可访问性影响：屏幕阅读器靠 <code> 判断内容类型，仅用 <pre class="brush:php;toolbar:false;"></pre> 会被读作“一段预格式文本”，而非“JavaScript 代码”

  中文对齐问题本质是字体，不是结构

  很多人以为 <pre class="brush:php;toolbar:false;"></pre> 里中文歪斜是标签没“对齐好”，其实是默认字体族未指定等宽字体，且中英文字符宽度天然不同。哪怕结构再严谨，字体不对，视觉就错位。

  • 必须加 CSS：font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
  • 别只写 monospace —— 在 Windows 中文系统下，它常映射到“微软雅黑常规体”，这不是等宽字体
  • 行高建议设为 line-height: 1.4 或具体像素值，避免不同字号下基线浮动导致的视觉偏移

  真正容易被忽略的是：你写的换行符和空格，必须真实存在于 HTML 源码中。<pre class="brush:php;toolbar:false;"></pre> 不会从 JS 动态插入的字符串里“还原”缩进 —— 那些空格如果是 JS 生成的，就得靠 white-space: pre 手动补救，<pre class="brush:php;toolbar:false;"></pre> 自身对此无能为力。