html解析器在词法分析阶段自动修剪属性值首尾空格并将中间连续空格压缩为单个空格，仅style属性和部分特殊场景例外；依赖原始空格时应使用json编码、cdata或url编码等方案。
HTML解析器对属性值中空格的处理规则
HTML解析器在读取标签属性时，会自动修剪（trim）属性值首尾的空白字符，并将中间连续空白压缩为单个空格——但仅限于未加引号或使用双引号/单引号包裹的属性值。这个过程发生在词法分析阶段，不是渲染行为，也无法通过CSS逆转。
常见错误现象：img src="a.jpg" alt=" hello world " 解析后，alt 属性的真实值是 "hello world"，不是原始字符串；而 class=" btn primary " 会被标准化为 "btn primary"，多个空格变一个，首尾被丢弃。
- 无引号属性值（如
class=btn primary）会被解析器按空格截断，primary会被误认为下一个属性名，直接报错或忽略 - 双引号/单引号内：内部连续空格仍被压缩，但首尾空格会被保留（注意：仅部分老解析器如此；现代浏览器普遍统一 trim 首尾）
-
data-*属性若依赖原始空格（如data-raw=' x y '），不能靠引号“保全”，必须用
哪些场景下空格会被保留？
只有两种情况属性值中的空格不会被压缩：
-
style属性：因为 CSS 解析器自身处理空格，HTML 层不干预。例如style="margin: 0 10px"中的多个空格会被 CSS 引擎忽略，但不会影响属性值字符串本身 - 未被 HTML 规范定义为空白敏感的自定义属性（如
data-id="a b"），实际仍会被压缩——别信“加引号就安全”，所有主流浏览器（Chrome/Firefox/Safari/Edge）都执行相同 trim + collapse 行为
验证方式：在控制台运行 document.querySelector('img').getAttribute('alt')，看返回值是否已去首尾、压空格。
想保留原始空格？别依赖 HTML 属性语法
HTML 属性值不是字符串容器，它是结构化标记的一部分。如果你需要传输含多空格、换行或制表符的原始数据，必须主动编码：
- 用
JSON.stringify()序列化后再塞进data-*，读取时JSON.parse(el.dataset.raw) - 对空格敏感的值改用
<script type="application/json"></script>块，或放在<textarea hidden></textarea>里 - 服务端输出前用
encodeURIComponent()编码，前端用decodeURIComponent()还原
强行用 塞进属性值（如 data-value="a b"）不可靠：它变成实体后不再是空格字符，且 JS 读取时仍是字符串 "a b"，需额外替换处理。
为什么正则替换 HTML 属性值里的空格很危险
用 preg_replace('/\s+/', ' ', $html) 类操作粗暴清理属性值，极易破坏内容：
- 误伤
value="x 中的空格，导致 HTML 实体解析失败 - 把
src="https://a.com?q=a+b&c=d e"里的 URL 空格和&混淆，改出非法链接 - 在未闭合引号（如
title=missing quote）区域触发解析偏移，整段 HTML 错位
真正安全的做法是用 DOM API（如 setAttribute()）或成熟 HTML 解析器（如 PHP 的 DOMDocument）操作，而非字符串正则。
属性值里的空格看似小事，但它在解析阶段就被固化，后续任何 CSS 或 JS 都无法还原原始空白。设计阶段就要决定：这里需不需要语义化空格？如果需要，就别放属性里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
