HTML中空格和换行会被浏览器折叠为单个空格，这是规范定义的“空白折叠”行为；需保留格式用，换行用，缩进等样式问题应交由CSS处理。
HTML里敲空格和回车为什么没用
浏览器默认会把连续的空白字符（空格、制表符、换行）压缩成一个空格，所以你在<p></p>里写十行缩进+五个空格，最终只显示一个空格。这不是bug，是HTML规范定义的“空白折叠”行为。
常见错误现象：<p>Hello<br>World</p>看起来像换行了，但其实靠的是<br>，不是换行符本身；又或者用 堆出间距，结果响应式下错位、可访问性差。
- 真正需要保留格式时，优先用
<pre class="brush:php;toolbar:false;"></pre>——它不折叠空白，且默认等宽字体 - 纯为了排版留空，用CSS的
margin或padding，而不是空格/换行 - 想让一段文字内换行又不破坏语义，用
<br>，但它不能替代段落结构
什么时候该用<pre class="brush:php;toolbar:false;"></pre>而不是普通标签
<pre class="brush:php;toolbar:false;"></pre>本质是语义化标签：表示“预格式化文本”，比如代码块、日志输出、ASCII图。它保留所有空格、缩进、换行，且默认white-space: pre。
使用场景：展示console.log输出、git diff结果、配置文件片段。别用它来给正文加缩进或做“视觉对齐”——那属于样式问题，该交给CSS。
立即学习“前端免费学习笔记（深入）”；
- 内容含大量缩进或空行？
<pre class="brush:php;toolbar:false;"></pre>合适；只是首行缩进两格？用text-indent -
<pre class="brush:php;toolbar:false;"></pre>里的文字无法自动换行，长行会撑破容器；加white-space: pre-wrap可修复 - SEO和屏幕阅读器会照读所有空格换行，敏感信息（如密钥缩进）慎用
和 这些实体到底怎么选
它们是HTML字符实体，用于插入不可折叠的空白。但滥用会导致HTML臃肿、维护困难、复制粘贴异常。
常见错误现象：用十几个 对齐按钮文字，结果在移动端错位；或混用 和 导致宽度不一致。
-
-
- 需要精确控制间距？用CSS的
letter-spacing或margin更可靠
从编辑器到浏览器：换行符在HTML中的真实路径
你在VS Code里按Enter，生成的是操作系统换行符（\n或\r\n），但HTML解析器根本不认这个——它只看标签和空白折叠规则。所以<div>A</div>
<div>B</div>换行，和写在同一行效果完全一样。
性能影响很小，但可读性陷阱大：团队协作时，有人靠缩进写HTML结构，结果删掉换行后样式崩了，其实是误把格式当功能。
- 编辑器里开“显示不可见字符”，能看清空格/换行是否真被保留
- 服务端模板（如Jinja、EJS）里换行可能被引擎吃掉，需查对应文档的
trim_blocks设置 - 用Prettier格式化HTML时，默认保留换行，但不会影响渲染——它只改源码可读性
