HTML中空白字符（空格、Tab、换行）默认被合并为单个空格；可用 实体或white-space: pre/pre-wrap实现可控空白；DOM中Tab仅影响可读性，不参与渲染。
HTML中空格和制表符都会被合并，但 不会
浏览器默认对 HTML 文本节点里的空白字符（包括空格、制表符 \t、换行 \n）执行「空白合并」：连续多个空白字符会被压缩成一个空格显示。这意味着：hello<tab><tab>world 和 hello<space><space>world 渲染效果一样，都是“hello world”中间一个空格。
唯一能绕过这个规则的是 HTML 实体 （non-breaking space），它被当作一个不可折叠的字符处理，多次使用就能实现可控的空白间距。
- 普通空格/Tab/换行 → 浏览器自动合并为单个空格
-
- CSS 的
white-space属性可改变行为（见下一条）
white-space: pre 和 pre-wrap 能保留 Tab 与换行
如果真需要显示原始的制表符或缩进结构（比如代码块、日志输出），得靠 CSS 控制空白处理逻辑。关键属性是 white-space：
code {
white-space: pre;
}
.log-output {
white-space: pre-wrap;
}
pre 会完全保留所有空白字符（包括 \t 和 \n），且不自动换行；pre-wrap 同样保留空白，但允许在必要时折行——更适合长文本中嵌入缩进内容。
立即学习“前端免费学习笔记（深入）”；
-
white-space: normal（默认）→ 合并空白 + 折行 -
white-space: pre→ 保留所有空白 + 不折行 -
white-space: pre-wrap→ 保留所有空白 + 允许折行 - Tab 字符在渲染时宽度取决于字体（多数等宽字体下 ≈ 4–8 个空格，但不是精确等价）
用 JavaScript 检测或替换 Tab 与空格要小心正则表达式
在 JS 中处理用户输入或 DOM 文本时，容易误判 \t 和连续空格。比如 str.replace(/\s+/g, ' ') 会把 Tab、换行、空格全换成单个空格，而 str.replace(/ {2,}/g, ' ') 只处理空格，忽略 Tab。
- 匹配所有空白字符：
/\s/g（含\t、\n、\r、\f、空格） - 只匹配空格（不含 Tab）：
/ /g或/[ ]/g - 只匹配 Tab：
/\t/g - 从 DOM 读取文本（
textContent）会拿到原始字符；用innerText则已受样式影响（可能丢失 Tab）
实际开发中别用 Tab 键手动缩进 HTML 标签来控制显示效果
新手常犯的错误：在 HTML 文件里用 Tab 键缩进标签，以为这样能在页面上产生缩进效果。这是无效的——这些 Tab 出现在标签之间（如 <div>\t<p>…</p></div>），属于标记结构的空白，浏览器解析时直接忽略，根本不会渲染。
- 想让文字内容缩进：用 CSS
text-indent或padding-left - 想对齐多行文本（如地址、诗歌）：用
<pre>或white-space: pre-wrap - 编辑器里的 Tab 缩进仅服务可读性，不影响最终渲染
- 服务端模板（如 Jinja、EJS）若开启「去除空白」选项，甚至会主动删掉这些 Tab
