<pre> 标签仅保留源码中的空格、换行符和制表符（\t），不压缩连续空格也不合并换行，但不保留缩进语义或CSS排版逻辑；需配合等宽字体（如 SFMono-Regular, Consolas, monospace）才能正确对齐，嵌套 <code> 等元素时空白处理仍由 <pre> 控制，子元素样式需额外处理。
HTML 中 <pre> 标签到底保留什么格式
<pre> 只保留空格、换行、制表符（\t）的原始显示，**不保留缩进语义或 CSS 排版逻辑**。浏览器渲染时，它只是把文本原样“按字符位置”铺开，不压缩连续空格，也不合并换行 —— 但前提是这些字符真正在 HTML 源码里存在。
- 常见错误现象：
<pre>hello world</pre>中的 4 个空格会显示为 4 个空格；但若 HTML 源码里写成<pre>hello world</pre>（用了<pre>不会特殊处理它， - 使用场景：展示代码片段、日志输出、ASCII 图、对齐的表格文本（纯字符对齐）、带缩进的配置文件内容
- 注意：HTML 解析器会把源码中的换行和缩进当作空白字符处理，所以如果写成多行但没换行符（比如 minified HTML），
<pre>也救不回来
为什么 <pre> 里的中文/等宽字体看起来不对齐
根本原因不是标签本身，而是默认字体族未指定等宽字体，且中英文字符宽度不同。浏览器在 <pre> 里仍用默认字体渲染，而中文全角字符通常比英文半角宽一倍，导致“视觉错位”。
- 实操建议：必须显式设置
font-family，例如font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace; - 兼容性影响：Windows 下
Consolas可靠，macOS 推荐'SFMono-Regular'或Menlo；Linux 用户可能需要 fallback 到Liberation Mono - 别依赖
monospace单独声明 —— 它只是通用关键字，实际渲染取决于系统映射，中文环境常映射到不等宽的“微软雅黑常规体”
嵌套 <code> 或 <span> 进 <pre> 会怎样
可以嵌套，但行为有边界：<pre> 只控制**空白字符的保留逻辑**，不干预子元素的样式继承或盒模型。一旦加了内联元素，就脱离了纯文本流，需手动处理换行与空格。
- 常见错误现象：在
<pre><code>console.log('x')</code></pre>中给<code>加color: red，颜色生效，但若<code>内含换行，<pre>不会自动撑开高度 —— 因为<code>默认是 inline 元素 - 正确做法：对需要高亮的代码块，优先用
<pre><code class="js">.../pre>结构，并确保code设为display: block或inline-block - 性能提示：避免在
<pre>内大量嵌套 span 做逐词样式 —— DOM 节点增多，且破坏了<pre>的原始文本语义，不如用语法高亮库统一处理
<pre> 和 white-space: pre 的关键区别在哪
核心差异在于语义与作用范围：<pre> 是 HTML 元素，自带语义（预格式化文本），且默认 white-space: pre；而 white-space: pre 是 CSS 属性，可加在任意元素上，但不会改变 HTML 结构或可访问性。
立即学习“前端免费学习笔记（深入）”；
- 使用场景选择：如果只是想让一段
<p>保留换行和空格，加style="white-space: pre;"更轻量；但如果内容本质是代码或日志，用<pre>更符合语义，屏幕阅读器也会按“预格式化”方式朗读 - 参数差异：两者都支持
pre-wrap/pre-line等变体，但<pre>的默认行为不可被 reset（除非显式覆盖 CSS），而white-space完全受 CSS 层叠控制 - 容易踩的坑：给
<div style="white-space: pre;">设置width后，长行不会自动换行 —— 因为pre值禁用自动换行；此时应改用pre-wrap
<pre> 的文本，如果本身是从 IDE 或编辑器里直接粘贴的，可能带了不可见的 Unicode 空格（如 、 ），这些字符 <pre> 照样保留，但浏览器渲染时宽度异常，排查起来极难定位。 
