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