index.html里的换行符是什么？

HTML中唯一专用于换行的元素是<br>标签，它自闭合且强制视觉换行；源码回车或n会被浏览器压缩为空格，无效；<pre>保留原始格式但语义受限；CSS的white-space可整体控制换行但缺乏精准性。

HTML里没有“换行符”这个东西，只有 <br>

很多人以为在 HTML 源码里敲回车、或者写 n 就能在网页上换行，其实不会。浏览器解析 HTML 时，会把连续的空白字符（空格、制表符、换行）全部压缩成一个空格，源码里的回车对渲染结果没影响。

真正起作用的是 <br> 标签——它是唯一专用于换行的 HTML 元素，且是自闭合标签（不需要 </br>）。

• 错误写法：<p>第一行n第二行</p> → 页面仍显示为“第一行 第二行”（中间一个空格）
• 正确写法：<p>第一行<br>第二行</p> → 两行垂直排列
• 注意：不要用 <br> 替代语义化结构，比如列表、段落、表单字段之间该用 <p> 或 <div> 就别硬塞 <br>

<pre> 保留原始换行和空格，但用途很窄

<pre> 标签会让浏览器按源码原样渲染，包括换行、缩进、多个空格。但它有固定样式（等宽字体 + 白色背景），且语义是“预格式化文本”，不适合普通内容排版。

常见误用场景：

立即学习“前端免费学习笔记（深入）”；

• 想让表单里的 <label> 和 <input> 换行，却套了个 <pre> → 破坏样式一致性
• 用 <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> 或带 class 的 <div> 配合 CSS。