pre标签的核心作用是原样保留文本中的空格、换行和缩进，确保代码、日志等格式化内容准确显示；它不合并空格、不忽略换行，需配合等宽字体及overflow-x: auto等样式优化可访问性与渲染效果。
pre 标签的核心作用是原样保留文本中的空格、换行和缩进，让代码、日志、ASCII 图等格式化内容按作者意图准确显示。
pre 会忠实保留所有空白字符
普通 HTML 元素（如 div、p）会把多个连续空格合并为一个，忽略换行和首尾空格。而 pre 不做任何简化： - 每个空格、制表符（Tab）、回车都作为独立字符渲染 - 文本在源码中怎么排版，页面上就怎么显示 - 适合展示缩进明显的代码片段或树状结构文本
通常配合 font-family: monospace 使用
等宽字体能确保对齐效果不被破坏，比如：
<pre style="font-family: 'Courier New', monospace;">
function hello() {
console.log("Hi");
}
</pre>
若不设等宽字体，缩进可能错位，尤其含 Tab 时。
注意默认样式与可访问性
浏览器会给 pre 添加 margin 和 white-space: pre，默认不换行。实际使用中建议： - 加 overflow-x: auto 防止长行溢出容器 - 对大段内容考虑加 tab-size 控制 Tab 宽度（如 tab-size: 4） - 若内容来自用户输入，需做 HTML 转义（如 < →
