HTML中用data-completed="true"/"false"标记学习进度，须由JS动态写入并同步localStorage，配合[data-completed="true"] CSS选择器驱动徽章UI更新，避免硬编码类名或误用falsy值。
HTML里怎么用data-属性标记学习进度
浏览器不认“学习完成”这种业务概念，得靠自定义属性存状态。data-completed是最直接的写法，值用"true"或"false"，别用1/0或空字符串——后者在JS里容易被误判为falsy。
常见错误是把状态写死在HTML里，比如<div data-completed="true">，结果用户没学完就显示已解锁。真实场景必须由JS动态写入，且要配合后端校验，否则前端篡改<code>data-值就能骗过徽章系统。
- 只用
data-前缀，不要用completed或x-completed等非标准写法 - 值统一用小写字符串
"true"/"false"，避免JSON.parse时出错 - 如果一个页面有多个路径节点，每个节点用独立
id+ 对应data-属性，别共用同一个data-名混着存
徽章图标怎么根据HTML状态自动切换
不能靠CSS类名硬编码写死“已解锁”，得用属性选择器绑定data-状态。比如[data-completed="true"] .badge::before来显示勾号，比用.badge--unlocked类更可靠——因为类名可能漏加、拼错，而data-属性只要JS写了就一定存在。
注意兼容性：data-属性选择器在IE9+都支持，但IE里不支持:has()这类新语法，所以别试图用div:has([data-completed="true"]) .badge这种写法。
立即学习“前端免费学习笔记（深入）”；
- 用
[data-completed="true"]而不是[data-completed]，后者会匹配任意非空值，包括"pending"或"error" - 图标建议用SVG内联，避免字体图标在
data-变更后重绘延迟 - 如果徽章带文字说明（如“已掌握”），文字内容也该由JS根据
data-值更新，别只靠CSS显示隐藏
为什么localStorage和HTMLdata-要双向同步
用户刷新页面后，HTML里的data-属性会重置成初始值，但实际进度存在localStorage里。不手动同步，就会出现“页面显示未完成，但本地记录其实是完成的”这种错乱。
典型错误是只在JS里读localStorage设初始状态，却忘了后续用户操作完成后，还要把新状态再写回data-属性——否则CSS选择器和后续JS逻辑都还在读旧值。
- 初始化时：从
localStorage读值 → 写入对应DOM节点的data-completed - 完成时：JS更新
localStorage→ 同步更新data-completed属性 → 触发CSS重渲染 - 别用
datasetAPI直接赋值null或undefined，这会让属性从DOM中消失，导致选择器失效
Chrome DevTools里怎么快速验证徽章状态是否生效
别点开Elements面板一条条找data-属性，直接用控制台执行document.querySelectorAll('[data-completed="true"]')，看返回的节点数是否符合预期。再用getComputedStyle($0).content（选中元素后）查伪元素内容，确认图标是否真被激活。
最容易被忽略的是：DevTools里手动修改data-值不会触发JS监听或CSS重算，只是视觉上变了。真正要测行为，得调用element.setAttribute('data-completed', 'true')，再观察后续逻辑是否响应。
- 用
$0快捷访问当前选中元素，比反复document.getElementById快得多 - 检查CSS是否生效，优先看Computed面板里的
content、background-image等实际渲染值，不是Styles里有没有规则 - 如果徽章依赖父容器状态（比如整个章节完成才亮），记得查父级
data-链，别只盯单个节点
数据状态和UI表现之间那层同步关系，永远比看起来脆弱。哪怕只漏一次setAttribute，或者localStorage里存了字符串"True"（首字母大写），徽章就会卡在“半解锁”状态——这种问题在灰度环境里最难复现。
