data-*属性值含空格、引号、等号时必须用引号包裹（双引号或单引号），值中含双引号则用单引号包裹，含单引号则用双引号包裹，同时需对特殊字符做HTML实体编码（如&），否则HTML解析器会截断或错位。
data-* 属性值含空格、引号、等号时怎么写才不报错
HTML 解析器对 data-* 属性值本身没有严格校验，但如果你在属性值里直接写未转义的双引号、单引号、等号或空格，会导致属性截断或解析错位——不是 JS 报错，而是 HTML 结构本身坏了，后续 getAttribute() 取到的值就不是你想要的。
常见错误现象：<div data-desc="user's name"> 中的单引号会让解析器认为属性值在 user 就结束了；data-url="https://a.com?q=1&v=2" 里的 & 被当成实体起始符，后面若没配对会报错或丢参数。
- 属性值必须用引号包裹（双引号或单引号均可），不能裸写：
data-id=123在某些场景下能侥幸通过，但含空格或特殊字符时必然失败 - 值中含双引号，就用单引号包整个值：
data-desc='He said "hello"' - 值中含单引号，就用双引号包整个值：
data-desc="It's a test" - 值中同时含单双引号？用 HTML 实体：
data-desc="He said "it's fine""（只转义"和'即可） -
&必须写成&，哪怕它在 URL 里：data-api="https://api.com?k=v&id=1"
CSS 选择器匹配 data-* 值含特殊字符时为啥不生效
当你写 [data-status=in-progress] 时，CSS 解析器会把它当作「属性值等于字符串 in，然后后面跟着一个非法的 -progress」，直接忽略整条规则。这不是浏览器 bug，是 CSS 规范明确要求：属性值含空格、连字符、点号、引号等时，必须加引号。
- 所有带连字符的值都得加引号：
[data-status="in-progress"]，而不是[data-status=in-progress] - 含空格的值必须加引号：
[data-title="My Blog Post"] - 含点号或斜杠也一样：
[data-version="2.1.0"]、[data-path="/api/v2/users"] - 别依赖“看起来能用”——哪怕
[data-id=123]当前生效，一旦值变成123-abc就立即失效
JS 读取 data-* 值时遇到 JSON 字符串解析失败怎么办
很多人把 JSON 直接塞进 data-config，比如 data-config='{"timeout":500,"retry":true}'，然后在 JS 里 JSON.parse(el.getAttribute('data-config')) —— 这看似合理，但只要服务端渲染时没做 HTML 实体编码，里面的引号、& 或 Unicode 字符就会被浏览器提前解析，导致字符串损坏，JSON.parse() 直接抛 SyntaxError。
立即学习“前端免费学习笔记（深入）”；
- 服务端输出前必须 HTML 实体编码：PHP 用
htmlspecialchars($json, ENT_QUOTES)，Node.js 用he.escape(json) - 前端拿到后先解码再解析：
JSON.parse(decodeURIComponent(escape(el.getAttribute('data-config'))))不推荐——太绕；更稳的是服务端编码 + 前端直接JSON.parse(htmlUnescape(...)) - 真正轻量的配置，拆成多个独立
data-属性更可靠：data-timeout="500" data-retry="true"，JS 里直接读el.dataset.timeout和el.dataset.retry - 如果必须存对象，优先考虑用
<script type="application/json">块，而非塞进data-
为什么 getAttribute('data-xxx') 比 dataset.xxx 更不容易因特殊字符翻车
dataset 是浏览器做的驼峰映射代理，它只关心属性名是否合法（小写+连字符），不干预属性值内容；而 getAttribute() 是原始字符串搬运工，它返回的就是你在 HTML 里写的每一个字节——包括你手动编码过的 "、&，也包括你漏掉编码的破损 JSON。
-
dataset无法帮你修复 HTML 层面的解析错误；getAttribute()至少让你看到“到底哪里坏了” - 比如
data-desc="a & b"写错了没转义，getAttribute('data-desc')返回"a "（后面全被截掉），你能立刻发现不对；而dataset.desc同样返回"a "，但你可能误以为是数据本身就这样 - 涉及特殊字符的场景，统一用
getAttribute()+ 手动解码/解析，比依赖dataset的“自动”更可控 - 尤其当值来自服务端模板（如 EJS、Twig），务必确认该变量插值路径是否已开启 HTML 转义——没转义的 JSON 插进
data-就是定时炸弹
实际项目里，最常被忽略的是服务端输出前那一步 HTML 编码。DOM 层面的引号包裹、CSS 选择器加引号，这些都容易补救；但一旦 JSON 字符串在 HTML 解析阶段就被切碎，JS 层怎么 parse 都救不回来。
