pre是语义明确的块级元素，仅允许文本及br、span、code、a等行内元素嵌套，禁止div、p等块级元素；必须配合code使用以确保语义、可访问性与等宽字体；需用white-space:pre-wrap处理换行，并提前转义&字符。
pre 标签不是装饰性容器，它是语义明确的块级元素，直接告诉浏览器：“别动我的空格和换行”。用错位置或混用其他块级标签，会触发解析错误或样式塌陷。
pre 标签必须嵌套纯文本或行内元素
pre 允许的内容类型有严格限制：只接受文本、br、span、code、a 等行内元素。一旦塞进 div、p、h1 这类块级标签，HTML 解析器会自动截断 —— 常见表现是后续内容跑出 pre 外部，或者整块消失。
- ✅ 正确：
<pre class="brush:php;toolbar:false;"><code>console.log("ok");</code></pre> - ❌ 错误：
<pre class="brush:php;toolbar:false;"><p>段落</p></pre>（p被浏览器强行移出） - ⚠️ 注意：
pre内部不能出现未转义的或 <code>>，否则会被当作标签起点/终点解析
pre + code 是语义最佳搭档
单独用 pre 只解决格式保留问题；加上 code 才表明“这是代码”，对可访问性（如屏幕阅读器）、SEO 和样式复用都有实质帮助。CSS 中针对 code 的默认等宽字体设置，也依赖这个嵌套结构生效。
-
pre控制换行、缩进、空格保留 -
code提供语义和基础字体继承（如font-family: monospace） - 不要写成
<pre class="brush:php;toolbar:false;"><span>...</span></pre>——span没有语义，也不触发等宽字体
white-space: pre-wrap 是实际渲染的关键开关
默认 pre 会禁用自动换行，长代码行直接撑破容器。不加 CSS 的话，用户得横向滚动才能看全 —— 这在移动端几乎不可用。
- 推荐组合：
pre { white-space: pre-wrap; word-break: break-word; } -
pre-wrap保留原始换行和空格，同时允许长行在边界处折行 - 避免用
pre-line：它会把多个连续空格合并成一个，破坏代码缩进 - 如果用了
overflow-x: auto，记得加padding-right，否则滚动条会遮挡最末字符
显示 HTML 代码时必须转义尖括号
想在页面上展示 <div>hello</div> 这串字符？直接写进去，浏览器就真把它当标签渲染了 —— 结果可能是空白、错位，甚至破坏整个页面结构。
- 必须手动或脚本转义：
<div>hello</div> - JavaScript 动态插入时，优先用
textContent赋值再取innerHTML，比正则替换更可靠 - 服务端输出（如 PHP）应调用
htmlspecialchars($str, ENT_NOQUOTES)，避免双引号被二次解析 - 切记：转义要在进入
pre之前完成，而不是塞进去后再处理
真正容易被忽略的点是：预格式化不是视觉效果问题，而是 HTML 解析规则本身。哪怕加了再多 CSS，只要里面混进一个未闭合的 <script></script> 或没转义的 &，整个 pre 区域都可能被截断或错乱 —— 它不像普通段落那样容错。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
