详细介绍optgroup标签的label属性

label属性必须非空，否则optgroup分组标题不显示、语义丢失且屏幕阅读器无法识别；它作为唯一渲染开关，缺失或为空字符串、纯空格时浏览器静默忽略分组，选项仍显示但失去逻辑结构。

label 属性不写、为空或含纯空格，<optgroup> 就等于没写——选项照常显示，但分组标题消失、语义丢失、屏幕阅读器读不出归属关系。

label 属性为什么必须非空

浏览器只靠 label 属性渲染分组标题，它不是可选配置，而是唯一触发渲染的开关。没有这个属性，<optgroup> 在 DOM 中存在，但视觉上不可见，无障碍 API 也完全忽略它。

• <optgroup><option>苹果</option></optgroup>：漏写 label，整组静默失效，控制台无任何提示
• <optgroup label=""> 或 <optgroup label=" ">：Chrome/Firefox 直接跳过该分组；Safari 可能渲染空白行，导致下拉错位
• 服务端模板未判空、JS 动态赋值时忘记 .trim()，比如 optgroup.label = group.name 而 group.name 是 "华东 "（尾随空格），结果等同于空字符串

label 值只能是纯文本，不能含 HTML 或换行

label 值被当作纯字符串解析，不支持任何 HTML 标签、实体或换行符。浏览器会把换行转成空格，所以 label="华东n地区" 最终显示为“华东 地区”。

• label="<strong>水果</strong>" → 页面原样显示文字 <strong>水果</strong>，不会加粗
• 中文、英文、数字安全，但避免引号、尖括号等可能破坏 HTML 结构的字符；若来自用户输入，需对 <、>、" 做 HTML 实体编码
• 想加图标或 hover 效果？原生 <optgroup> 做不到，得换 JS 模拟下拉（如 Choices.js）

label 必须在 <select> 的直接子级中声明

<optgroup> 只能作为 <select> 的**直接子元素**。一旦被包进 <div>、<form>，或插在 <option> 中间，浏览器会直接忽略整段结构，且不报错。

• <div><optgroup label="水果"><option>苹果</option></optgroup></div> → 分组完全不渲染
• <select><optgroup label="蔬菜"></optgroup></select> → 合法，但内部没 <option> 会导致空分组（视觉上可能只剩一行灰字）
• 模板引擎里写条件块：{% if showGroup %}<optgroup label="水果"></optgroup>{% endif %} → 若 showGroup 为 false，可能导致 <select> 内部结构断裂

label 不参与表单提交，也不可聚焦或选中

<optgroup label="待上线"><option value="v2">新后台</option></optgroup> 中的 label 本身没有 value，不会出现在 FormData 或 select.value 中。它只是视觉与语义容器。

• 键盘导航（Tab / 方向键）会自动跳过 <optgroup>，只停在 <option> 上
• JS 操作时，别试图设 optgroup.selected = true 或读 optgroup.value —— 这些属性只属于 <option>
• 给 <optgroup> 加 disabled，只让内部 <option> 变灰不可选，但 label 文字仍清晰可见——这不是禁用失败，而是规范行为

真正容易被忽略的是：label 不仅要“能显示”，还得让用户一眼看懂归属、适配语音朗读节奏、经得起国际化替换。硬编码中文、用“Group 1”这类模糊命名、或依赖 CSS 伪元素伪造标题，都会在真实项目中陆续暴露问题。