label属性必须非空，否则optgroup分组标题不显示、语义丢失且屏幕阅读器无法识别；它作为唯一渲染开关，缺失或为空字符串、纯空格时浏览器静默忽略分组，选项仍显示但失去逻辑结构。
先说几个核心判断：label 属性不写、为空或含纯空格， 就等于没写——选项照常显示，但分组标题消失、语义丢失、屏幕阅读器读不出归属关系。
label 属性为什么必须非空
浏览器只认 label 属性，它就是分组的唯一开关，没有它，分组虽然有壳但没魂。从 DOM 层面看， 节点确实存在，但视觉上没有任何标题，无障碍 API 也直接跳过它，等于这个分组从未被渲染过。
常见翻车场景有几种：
：漏写label，整组静默失效，控制台无任何提示或：Chrome/Firefox 直接跳过该分组；Safari 可能渲染空白行，导致下拉错位- 服务端模板未判空、JS 动态赋值时忘记
.trim()，比如optgroup.label = group.name而 group.name 是"华东 "（尾随空格），结果等同于空字符串
label 值只能是纯文本，不能含 HTML 或换行
label 值被当作纯字符串解析，不支持任何 HTML 标签、实体或换行符。浏览器会把换行转成空格，所以 label="华东\n地区" 最终显示为“华东 地区”。
几个容易踩的坑：
label="水果"→ 页面原样显示文字水果，不会加粗- 中文、英文、数字安全，但避免引号、尖括号等可能破坏 HTML 结构的字符；若来自用户输入，需对
<、>、"做 HTML 实体编码 - 想加图标或 hover 效果？原生
做不到，得换 JS 模拟下拉（如 Choices.js）
label 必须在
只能作为 的直接子元素。一旦被包进 、，或插在 中间，浏览器会直接忽略整段结构，且不报错。
几个典型错误：
→ 分组完全不渲染→ 合法，但内部没会导致空分组（视觉上可能只剩一行灰字）- 模板引擎里写条件块：
{% if showGroup %}{% endif %}→ 若showGroup为 false，可能导致内部结构断裂
label 不参与表单提交，也不可聚焦或选中
中的 label 本身没有 value，不会出现在 FormData 或 select.value 中。它只是视觉与语义容器。
操作上的注意事项：
- 键盘导航（Tab / 方向键）会自动跳过
，只停在上 - JS 操作时，别试图设
optgroup.selected = true或读optgroup.value—— 这些属性只属于 - 给
加disabled，只让内部变灰不可选，但label文字仍清晰可见——这不是禁用失败，而是规范行为
真正容易被忽略的是：label 不仅要“能显示”，还得让用户一眼看懂归属、适配语音朗读节奏、经得起国际化替换。硬编码中文、用“Group 1”这类模糊命名、或依赖 CSS 伪元素伪造标题，都会在真实项目中陆续暴露问题。
