标签必须显式包裹语义完整段落，不可依赖回车或空格；禁止嵌套块级元素；段距用margin控制，首行缩进用text-indent；仅用于同一语义块内换行，仅适用于代码等需原样保留空白的场景。
用 <p></p> 拆分语义段落最稳妥
多数多行文字本质是多个段落，不是“一行接一行”的视觉排列。<p></p> 天然独占一行、自带上下间距、支持屏幕阅读器，且浏览器默认样式已适配可读性。别为了省一个标签而用 <br> 堆砌——那只是换行，不是排版。
常见错误：把整段文案塞进一个 <p></p> 里再狂插 <br>，结果语义丢失、移动端间距失控、SEO 友好度归零。
- 每段独立内容（如产品描述、用户评价、条款条目）都该用单独的
<p></p> - 若需去除默认间距，用 CSS 控制：
p { margin: 0.8em 0; }，而不是删标签 - 嵌套
<p></p>是非法 HTML，解析器会自动闭合前一个，导致结构错乱
white-space: pre-line 适合带换行符的动态文本
后端返回或用户输入的纯文本里含
，但直接 textContent 渲染时换行失效——因为 HTML 默认合并空白。这时不能靠 <br>，得用 CSS 接管空白行为。
white-space: pre-line 是平衡点：保留
换行，合并多余空格，还允许长单词自动折行。比 pre 更实用，比 normal 更可控。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 必须确保原始字符串中真有
\n或显示为文字 - 在 Vue/React 中，用
style={{ whiteSpace: 'pre-line' }}或 class 绑定，别依赖 innerHTML - 避免对整页
body设该属性，它会影响按钮文字、导航栏等所有文本
别滥用 <br>，除非你明确需要“无语义换行”
<br> 只解决一个事：在同一段落内，强制中断当前行并跳到下一行。它不产生新段落、不带间距、不传达结构信息。地址、诗歌、签名档这类“视觉分行但逻辑一体”的场景才适用。
滥用后果明显：响应式断点下换行位置错乱；无障碍工具无法识别段落边界；CSS 调整行高或对齐时行为不可预测。
- 写法必须是
<br>（小写、自闭合），<br>或<br>在 HTML5 中虽可解析，但属冗余 - 连续多个
<br>等价于空行，但语义上仍是“同一段内的多次换行”，不是段落分隔 - 若发现页面里
<br>超过 3 个，大概率该重构为<p></p>或用 CSS 控制
<pre class="brush:php;toolbar:false;"></pre> 仅用于代码、日志、ASCII 图等需像素级对齐的场景
<pre class="brush:php;toolbar:false;"></pre> 会原样渲染所有空格、制表符、换行符，连缩进都一比一保留。它自带等宽字体和外边距，天生不适合普通正文排版。
强行用它排多行文字，代价是：破坏行高一致性、干扰字体继承、移动端容易横向溢出、无法响应式调整缩进宽度。
- 只在展示终端输出、JSON 日志、CLI 提示、代码片段时用
<pre class="brush:php;toolbar:false;"><code></code> 组合</pre> - 若真要嵌入段落中，必须重置样式：
pre { font-family: inherit; margin: 0; white-space: pre-line; } - 中文混排时尤其危险——
<pre class="brush:php;toolbar:false;"></pre>下全角空格和半角空格宽度不同，对齐极易崩坏
真正难的不是选哪个标签，而是判断“这算不算一个段落”。语义先行，样式后置，否则再多技巧也救不了结构混乱的页面。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
