optimum 是“最优区间锚点”，不参与计算仅决定绿色优区间；其值必须在[min, max]内，否则语义错误；颜色由optimum所在low/high划分的三段决定，与value数值差无关。
optimum 不是“最佳数值”，而是“最优区间锚点”——它本身不参与计算 value 和它的距离，只决定哪一段被浏览器标记为绿色“优区间”。
optimum 值必须落在 [min, max] 范围内
超出范围（如 min="0" max="100" 时设 optimum="-5" 或 optimum="105"）属于语义错误，浏览器行为未定义：Chrome 可能静默忽略、Firefox 可能不着色、Safari 可能渲染异常。这不是兼容性问题，是配置错误。
- 业务语义是“越低越好”（如错误率），应设
optimum="0"，而非负数 - 语义是“越高越好”（如响应成功率），应设
optimum="100"，而非超限值 - 若
min和max是整数，优先用整数optimum，避免浮点精度干扰（如optimum="50.0"和optimum="50"在部分解析器中行为可能不一致）
optimum 的颜色效果依赖 low / high 的三段划分
浏览器把 [min, max] 按 low 和 high 切成固定三段：[min, low)、[low, high]、(high, max]。然后看 optimum 落在哪一段，那一段就变成绿色；相邻段黄色，对角段红色。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
-
optimum="85"配low="60"high="90"→ 落在第二段 →[60, 90]变绿 -
optimum="92"同样配low="60"high="90"→ 落在第三段 →(90, max]变绿，此时value="88"就显示黄色（邻段） - 若
value="25"且optimum="20"、low="30"，则optimum落第一段 →[min, 30)变绿 →value="25"绿色
调试时别只盯着 value 和 optimum 的数值差
常见误判：value="85" 和 optimum="95" 看似接近，但颜色可能是黄色——因为 optimum 落在第三段，而 value 在第二段，属于“邻段”。真正决定颜色的是区间归属关系，不是算术差值。
立即学习“前端免费学习笔记（深入）”；
- 先固定
low和high，再调optimum，否则颜色变化难以预期 - 可用 JS 快速预判：
getOptimumZone(optimum, min, max, low, high)返回'low'/'mid'/'high'，再和value所在段比对 - 不要单独设
optimum就以为能控制颜色——它必须和low、high配合才有意义
最易被忽略的点：optimum 的语义必须和 low/high 划分出的区间逻辑对齐。写完标签后，别只检查 value 是否“看起来合理”，要手动验证 optimum 落在哪一段、那一段是否真的对应你的业务定义（比如“偏低但理想”还是“偏高才理想”）。
