HTML无原生便签优先级颜色标准，需用class配合CSS变量实现红/黄/绿视觉编码，兼顾可访问性、对比度与语义化，并通过data-priority统一前后端优先级映射。
HTML里没有原生的“便签优先级颜色编码”标准
浏览器根本不认识所谓“红/黄/绿便签”这种语义。你写的 <label class="priority-high"></label> 或 <span data-priority="urgent"></span>，只是自定义标记，颜色全靠 CSS 控制，和 HTML 本身无关。
常见错误是直接写 <font color="red"></font>——这个标签早在 HTML5 就被废弃了，现代浏览器虽可能渲染，但会忽略或报警告，且无法响应式、不可访问、不支持伪类。
- 用
class而不是内联样式或<font></font>：便于复用、主题切换、配合 JS 动态更新 - 语义优先：优先用
<span role="status"></span>或<strong></strong>配合 class，让屏幕阅读器也能感知重要性 - 避免用颜色作为唯一区分手段：色弱用户看不到红/绿差异，必须叠加图标、文字标识或字体粗细
CSS怎么给不同优先级加红/黄/绿背景和文字
核心是用 class 做钩子，CSS 控制视觉表现。推荐用 BEM 风格命名，比如 badge--high、badge--medium、badge--low，避免歧义。
别硬写 color: #ff0000 ——用 HSL 或 CSS 变量更易维护，比如：
立即学习“前端免费学习笔记（深入）”；
body {
--priority-high: hsl(0, 100%, 50%);
--priority-medium: hsl(45, 100%, 50%);
--priority-low: hsl(120, 100%, 45%);
}
.badge--high { background-color: var(--priority-high); color: white; }
.badge--medium { background-color: var(--priority-medium); color: black; }
.badge--low { background-color: var(--priority-low); color: white; }
- 黄底黑字比黄底白字可读性高得多，尤其在投影或低亮屏上
- 红/绿对比度要 ≥ 4.5:1 才符合 WCAG AA 标准，可用 Chrome DevTools 的“Contrast”检查
- 不要只改文字色：加边框、圆角、padding，让 badge 在行内有明确边界感
JS动态更新优先级时class怎么切才不闪、不卡
直接 element.className = "badge--high" 会清空所有其他 class，容易误删 is-hidden 或 is-loading 这类状态类。
正确做法永远用 classList API：
- 添加/删除单个状态：
el.classList.add("badge--high")、el.classList.remove("badge--medium") - 安全替换：
el.classList.replace("badge--low", "badge--high")（IE 不支持，需 polyfill 或 fallback） - 批量操作用
toggle()配合数据驱动：比如根据后端返回的priority: "critical"映射到 class
性能陷阱：频繁调用 classList 不会重排，但若在循环里反复操作同一元素，建议先拼好 class 字符串再一次性赋值 className。
为什么用data-priority比纯class更灵活
当优先级逻辑要参与计算、排序、过滤，或者需要服务端渲染时，data- 属性比 class 更“干净”——它不承担样式责任，只传递原始语义。
比如：<div data-priority="2" class="badge badge--medium">中优先级</div>
- JS 可直接
el.dataset.priority拿到数字，用于排序或条件判断 - 服务端模板（如 Jinja、EJS）能根据
priority值自动选 class，前后端逻辑一致 - 测试时更容易断言：
expect(el.dataset.priority).toBe("2")比查 class 名字符串稳定
注意：dataset 会把连字符转成驼峰（data-priority-urgent → el.dataset.priorityUrgent），别拼错。
真正难的是统一优先级定义——前端说“红=紧急”，后端返回的字段可能是 "P0"、"critical" 或 0。这个映射表得前后端对齐，否则颜色再准也没用。
