HTML怎么标注学习路径完成奖励_HTML徽章解锁条件说明【指南】-html教程-PHP中文网

HTML中用data-completed="true"/"false"标记学习进度，须由JS动态写入并同步localStorage，配合[data-completed="true"] CSS选择器驱动徽章UI更新，避免硬编码类名或误用falsy值。

html怎么标注学习路径完成奖励_html徽章解锁条件说明【指南】

HTML里怎么用`data-`属性标记学习进度

浏览器不认“学习完成”这种业务概念，得靠自定义属性存状态。data-completed是最直接的写法，值用"true"或"false"，别用1/0或空字符串——后者在JS里容易被误判为falsy。

常见错误是把状态写死在HTML里，比如

，结果用户没学完就显示已解锁。真实场景必须由JS动态写入，且要配合后端校验，否则前端篡改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逻辑都还在读旧值。

											
												
												
													财经HTML高端海报生成
													复杂得财经如何变成清晰，适合手机看的海报？如何加上你的IP
												
												下载
												
											
										

初始化时：从localStorage读值 → 写入对应DOM节点的data-completed

完成时：JS更新localStorage → 同步更新data-completed属性 → 触发CSS重渲染
别用dataset API直接赋值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"（首字母大写），徽章就会卡在“半解锁”状态——这种问题在灰度环境里最难复现。