用 data-difficulty 属性存难度值最稳妥，推荐整数1–5，CSS用属性选择器匹配显示星级，JS读取时需类型转换，避免 aria-label 冗余，团队须统一数值含义。
用 data- 属性存难度值最稳妥
HTML 本身没有原生的“题目难度”语义标签，硬塞 <meter> 或 <progress> 反而误导可访问性。直接用自定义 data- 属性是事实标准，浏览器不解析但 JS/CSS 都能读取，也符合 HTML5 规范。
常见错误是把难度写进 class（比如 class="diff-3"），结果样式一改、JS 就断；或者用 title（用户 hover 才看到，无法程序化读取）。
-
data-difficulty="3"：推荐数值，整数 1–5，便于排序、筛选、条件渲染 -
data-difficulty="hard"：字符串也可，但后续 JS 处理要加映射表，容易漏 case - 别用
difficulty="3"（非标准属性，验证失败，部分旧 IE 可能忽略）
CSS 用属性选择器显示星级图标
数值型 data-difficulty 能直接驱动 CSS，避免为每个难度写独立 class。关键是用属性选择器 + 伪元素，不污染 HTML 结构。
注意：CSS 无法做数值比较（比如 “大于 3 显示红色”），只能精确匹配；星级数量得手动写死，但维护成本极低。
立即学习“前端免费学习笔记（深入）”；
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 给题目容器加
data-difficulty="4" - CSS 写：
span[data-difficulty="1"]::after { content: "★"; } span[data-difficulty="2"]::after { content: "★★"; } /* ...依此类推 */ - 想动态生成更多星？必须用 JS 渲染，CSS 做不了循环
JS 读取时别忘了类型转换
dataset 返回的永远是字符串，el.dataset.difficulty > 3 会出错——因为字符串比较和数值比较逻辑不同（"10" < "3" 是 true）。
真实场景里，后端可能返回 "2.5" 或 "medium"，前端 JS 必须统一兜底。
- 安全写法：
parseInt(el.dataset.difficulty) || 0（数值优先） - 兼容字符串：
const diffMap = { easy: 1, medium: 3, hard: 5 }; const val = diffMap[el.dataset.difficulty] || 0; - 用
Number()比parseInt()更严格，Number("2.5")得 2.5，parseInt("2.5")得 2
别在 aria-label 里重复塞难度描述
如果题目本身已有清晰文本（如“计算二次函数顶点坐标”），再往 aria-label 里加“难度：4星”反而干扰屏幕阅读器用户——他们听到的是冗余信息，且无法关闭。
真有必要暴露难度给辅助技术，用 aria-describedby 指向一个隐藏的说明元素更合适，让使用者自主决定是否收听。
- 错误：
aria-label="计算二次函数顶点坐标，难度：★★★★" - 正确：
<span id="q1-diff">难度：★★★★</span>+aria-describedby="q1-diff" - 隐藏说明元素加
aria-hidden="true"？不行，那屏幕阅读器就读不到了
实际用的时候，最难的不是怎么标，而是团队是否约定好数值含义——有人觉得“3”是中等，有人觉得是偏难。这个得写进项目文档，不然前后端对不上，数据就废了。
