正确顺序是<pre><code>，不能颠倒；<pre>保留换行缩进等格式，<code>声明代码语义，二者嵌套才能兼顾格式与语义，且为高亮库唯一识别结构。
用 <pre></pre> 包裹原始文本，再嵌套 <code>
直接写 <p> 或 <div> 显示代码会丢失换行、缩进和空格——浏览器默认会合并连续空白符。必须用 <pre> 告诉浏览器“按原样渲染”，它保留所有空格、制表符和换行。但仅靠 <pre> 不够：它没有语义，也不带代码样式提示。所以标准做法是嵌套一层 <code>，既表达“这是计算机可执行/可读的代码片段”，又方便后续用 CSS 统一加底色、字体等。
常见错误现象：
- 只用
<code>而不套<pre>→ 换行和缩进全消失 - 用
<pre>但没闭合 → 后续所有 HTML 内容被当成预格式化文本，布局崩坏 - 在
<pre>里写中文注释或路径含全角空格 → 渲染错位（应统一用半角）
white-space 的三种关键取值怎么选
<pre> 默认等价于 white-space: pre，但它不是唯一选择。根据使用场景，你可能需要：
-
white-space: pre-wrap：最常用。保留换行和空格，但允许自动折行（避免长代码行撑破容器） -
white-space: pre-line：合并多余空格，但保留换行 —— 适合日志输出、命令行回显这类“换行有意义、空格不重要”的场景 -
white-space: pre：严格按源码渲染，不折行、不合并空格 —— 适合展示 ASCII 图、固定列宽表格，但需配合overflow-x: auto防溢出
别用 white-space: nowrap 套代码块——它禁用换行却不管空格，缩进全乱，且横向滚动体验差。
立即学习“前端免费学习笔记（深入）”；
防止代码块破坏页面流的两个硬性约束
代码块默认是块级元素，但容易引发两类布局问题：
- 外边距塌陷：相邻
<pre>之间上下 margin 会合并，导致段间距不可控 → 显式设margin-block: 1em或margin: 1em 0 - 宽度失控：未设
max-width时，超长行会让父容器无限拉宽，移动端直接横向滚动 → 必须给容器加overflow-x: auto，并确保<pre>不设固定 width
顺带提醒：<pre> 里不要塞 <div> 或 <p> —— 它们会破坏预格式化语义，部分浏览器会自动闭合 <pre> 导致结构断裂。
语法高亮不是排版，但影响可读性底线
纯 <pre><code> 只解决“不丢格式”，不解决“看得清”。真实项目中，几乎总会引入语法高亮库（如 Prism.js、highlight.js），它们依赖 <code> 的 class 属性识别语言类型：
function hello() {
console.log('Hello');
}
注意两点：
- 语言标识必须写对，比如
language-python不是python或py - 高亮库通常要求
<code>是<pre>的**直接子元素**，中间不能插<span>或其他标签
如果只是临时调试或静态文档，用 CSS 手动配色也行，但别试图用 font 标签或内联 color —— 它们已废弃，且无法响应深色模式。
