必须同时使用 <pre> 和 <code> 标签：<pre> 保留空格、制表符和换行，<code> 提供代码语义；仅用其一会导致格式丢失或语义缺失。
单用 标签无法保留空格和制表符</H3>
<p><code>code
是行内元素，浏览器默认按 white-space: normal 渲染：连续空格、制表符（\t）、换行符（\n）全被压缩成单个空格。你写：
<code>function foo() {<br> return 42;<br>};</code>
实际渲染为：function foo() { return 42; };——所有缩进和换行消失，语义断裂。
必须嵌套 才能真正保留格式</H3>
<p><code>pre</code> 提供 <code>white-space: pre</code> 行为，是保留空白符的基础设施；<code>code</code> 则负责语义标注（表示这是计算机代码）。二者缺一不可：</p>
<ul>
<li><code>pre</code> 确保空格、<code>\t</code>、<code>\n</code> 原样输出</li>
<li><code>code</code> 告诉辅助技术/搜索引擎“这是代码”，利于可访问性和 SEO</li>
<li>仅用 <code>pre</code> 会丢失语义；仅用 <code>code</code> 会丢失格式</li>
</ul>
<p>正确写法（顶格，无前置缩进）：</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>
<pre class="brush:php;toolbar:false;"><pre class="brush:php;toolbar:false;"><pre><code class="js">function foo() {<span></span><br> return 42;<br>}</code></pre>
顶格书写 + 避免 HTML 源码缩进
pre 会把 HTML 源码中标签内的换行和空格也当作文本节点渲染。常见错误：
- 编辑器自动缩进
pre内容 → 左侧多出 2–4 个空格 -
pre被包裹在div中且换行后缩进 → 首行缩进被渲染 - 后端模板未
trim()输出字符串 → 开头带换行或空格
务必让 <pre> 的开始标签紧贴第一行代码，例如：
<div class="snippet"><pre><code>console.log("hello");</code></pre></div>
而不是：
<div class="snippet"><pre><code><br> console.log("hello");<br></code></pre></div>
动态插入时用 textContent，别用 innerText
若通过 JS 动态设置代码内容（如加载示例片段），用 innerText 会二次压缩空白：
-
element.innerText = "a\tb\n c"→ 渲染为a b c -
element.textContent = "a\tb\n c"→ 完整保留\t和\n及空格
安全写法：
const pre = document.querySelector('pre');<br>const code = pre.querySelector('code');<br>code.textContent = `function test() {<br> return true;<br>}`;
注意：如果 code 元素已有子节点（比如内联 strong），改用 code.replaceChildren(document.createTextNode(str)) 更稳妥。
code 就万事大吉，结果发现缩进还在丢——问题往往不出在 CSS 或 JS，而是在 HTML 源码那几行看不见的空格和换行上。 
