HTML中唯一专用于换行的元素是标签，它自闭合且强制视觉换行；源码回车或\n会被浏览器压缩为空格，无效；保留原始格式但语义受限；CSS的white-space可整体控制换行但缺乏精准性。
HTML里没有“换行符”这个东西，只有 <br>
很多人以为在 HTML 源码里敲回车、或者写 \n 就能在网页上换行，其实不会。浏览器解析 HTML 时，会把连续的空白字符（空格、制表符、换行）全部压缩成一个空格，源码里的回车对渲染结果没影响。
真正起作用的是 <br> 标签——它是唯一专用于换行的 HTML 元素，且是自闭合标签（不需要 ）。
- 错误写法：
<p>第一行\n第二行</p>→ 页面仍显示为“第一行 第二行”（中间一个空格） - 正确写法：
<p>第一行<br>第二行</p> <p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>→ 两行垂直排列 - 注意：不要用
<br>替代语义化结构，比如列表、段落、表单字段之间该用<p></p>或<div> 就别硬塞 <code><br><pre class="brush:php;toolbar:false;"></pre>保留原始换行和空格，但用途很窄<pre class="brush:php;toolbar:false;"></pre>标签会让浏览器按源码原样渲染，包括换行、缩进、多个空格。但它有固定样式（等宽字体 + 白色背景），且语义是“预格式化文本”，不适合普通内容排版。
htmlppt.skill下载把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
常见误用场景：
- 想让表单里的
<label></label>和<input>换行，却套了个<pre class="brush:php;toolbar:false;"></pre>→ 破坏样式一致性 - 用
<pre class="brush:php;toolbar:false;"></pre>包裹一段说明文字，结果字体变小、背景变灰 → 用户体验突兀 - 实际需要的是布局控制（如 CSS 的
display: block或flex-direction: column），不是保留换行
服务端或模板引擎里写的
\n怎么办？如果你在 PHP、JS 模板或 Markdown 渲染中动态插入含
\n的字符串，浏览器依然不认。必须显式转换：- PHP 中：
nl2br($text)把\n替换成<br> - JS 中：
str.replace(/\n/g, '<br>')（注意 XSS 风险，需先转义） - Vue/React：用
v-html或dangerouslySetInnerHTML渲染已处理好的 HTML 字符串
直接输出未处理的
\n到 HTML 内容中，等于没换行。CSS 的
white-space能不能替代<br>？可以，但要清楚代价。设
white-space: pre-line或pre-wrap后，源码里的\n会生效，但：- 它影响整块容器，无法对某两个词之间单独换行
- 可能意外保留不该留的空格或缩进（尤其从数据库读出的脏数据）
- 在表单控件、按钮文案、标题等地方容易导致不可控的折行
- 移动端下
pre-line对小屏幕折行行为更难预测
所以，明确要换行的地方，老老实实用
<br>；需要整体控制空白行为的场景，再考虑 CSS 方案。最常被忽略的一点：换行是表现层操作，但 HTML 的核心是语义。别为了“看起来换行了”而牺牲结构合理性——比如用一堆
<br>拼接地址，不如用<address></address>或带 class 的<div> 配合 CSS。</div> - 想让表单里的
