是“preformatted text”的缩写，核心作用是原样保留空格、换行和制表符；它不是段落标记，语义和 完全不同，适用于终端输出、代码片段、ASCII 表格等需严格保留格式的场景。

pre 标签不是段落标记，而是预格式化容器

很多人看到

就下意识觉得是“paragraph”的缩写，其实完全不是。

是 “preformatted text” 的简写，核心作用只有一个：**原样保留空格、换行、制表符等空白字符**。它和

语义完全不同，

才是真正的段落标记，会自动合并多余空白并按块渲染；而

渲染时连你代码里缩进的 4 个空格、换行后的空行都会照单全收。

什么时候必须用 pre 而不是 div 或 p

以下场景不加

很难准确还原格式：

• 显示终端命令输出（含多级缩进和空行）
• 嵌入代码片段（尤其是 Python、YAML、JSON 等对缩进敏感的语法）
• 展示带固定列宽的 ASCII 表格或日志时间戳对齐内容
• 渲染歌词、诗文等需严格保留换行与空格的文本

用

或

使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审

使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。

下载

包裹这些内容，浏览器会把所有连续空白压缩成一个空格，换行也被忽略——除非你手动加 white-space: pre CSS，但那只是样式模拟，语义上仍不正确。

pre 里能嵌套哪些标签？code 是最佳搭档

是块级元素，允许包含行内元素，但禁止直接嵌套

、

这类块级标签（虽多数浏览器能容错渲染，但不符合 HTML5 规范）。

• 推荐组合：

  <code class="js">console.log("hello");</code>

  —— 提供语义（这是代码），
  提供格式（保留缩进换行）
• 可安全嵌套：（用于高亮关键词）、（跳转到某行）、（行内图标）
• 避免嵌套：
  、

  、

  —— 容易破坏预格式化流，也可能触发浏览器解析异常

  常见坑：样式冲突、宽度溢出、SEO 影响

  默认用等宽字体（如 monospace），且不自动换行，容易撑破容器：

  • 加 CSS 控制：用 overflow-x: auto 防横向滚动条失控，或 white-space: pre-wrap 允许长行换行（但会轻微改变原始格式）
  • 别设 width 属性 —— HTML5 已废弃
    ，无效且可能被忽略
  • 搜索引擎能读取
    内文本，但不会把它当正文段落加权；若内容重要（如 API 响应示例），建议额外用
    或 aria-label 补充说明

  最常被忽略的一点：pre 本身不提供语法高亮，也不解析 HTML 实体。比如你写

  ，它会原样显示为

  ；但如果你直接写

  ，浏览器会尝试解析成真实标签——所以实际使用中，HTML 特殊字符必须手动转义。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！