HTML怎么标注测验题目难度系数_HTML星级或数值标识【操作】-html教程-PHP中文网

用 data-difficulty 属性存难度值最稳妥，推荐整数1–5，css用属性选择器匹配显示星级，js读取时需类型转换，避免 aria-label 冗余，团队须统一数值含义。

html怎么标注测验题目难度系数_html星级或数值标识【操作】

用 `data-` 属性存难度值最稳妥

HTML 本身没有原生的“题目难度”语义标签，硬塞 <meter></meter> 或 <progress></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 显示红色”），只能精确匹配；星级数量得手动写死，但维护成本极低。

给题目容器加 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" 是 true）。

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

真实场景里，后端可能返回 "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