<optgroup>必须作为<select>的直接子元素且带非空label属性才生效，禁用时整组不可选，不支持嵌套或aria-label替代label。
optgroup 必须嵌套在 select 里面才能生效
单独写 <optgroup> 标签不会渲染出任何内容，浏览器会直接忽略它。它只是语义性容器，必须作为 <select> 的直接子元素，且只能包裹 <option>。
常见错误是把它放在 <select> 外面，或者用 <div> 包一层——这些都会导致分组失效，下拉菜单里看不到分组标题。
-
<select><optgroup label="水果"><option>苹果</option></optgroup></select>✅ 正确 -
<optgroup label="水果"><option>苹果</option></optgroup>❌ 无父<select>，不显示 -
<select><div><optgroup label="水果">...</optgroup></div></select>❌<optgroup>不是<select>的直接子元素，被忽略
label 属性是必需的，且不能为空字符串
<optgroup> 没有 label 属性，浏览器就不会渲染分组标题——它会把里面的 <option> 当作普通选项平铺显示，失去分组意义。
空字符串 label="" 在多数浏览器中也会跳过分组渲染（Chrome、Firefox 均如此），看起来像没写一样。
立即学习“前端免费学习笔记（深入）”；
-
<optgroup label="前端"><option value="js">JavaScript</option></optgroup>✅ 显示“前端”作为灰色标题 -
<optgroup><option value="js">JavaScript</option></optgroup>❌ 标题不出现，选项变成顶层可选项目 -
<optgroup label=""><option value="js">JavaScript</option></optgroup>❌ 表现同上，等效于没写label
optgroup 里的 option 无法设置 disabled，但 optgroup 本身可以
<optgroup disabled> 会让整组变灰且不可选，里面的 <option> 自动继承禁用状态；但反过来，在 <option> 上加 disabled 是允许的，只是它和 <optgroup disabled> 共存时，以组级禁用为准。
-
<optgroup label="旧版" disabled><option>IE11</option></optgroup>✅ 整组不可点、不可聚焦 -
<optgroup label="新版"><option disabled>Chrome Canary</option></optgroup>✅ 单个选项禁用，其他仍可用 -
<optgroup disabled><option disabled>Edge Legacy</option></optgroup>✅ 禁用状态由<optgroup>决定，<option>的disabled多余但不报错
optgroup 不支持嵌套，也不支持 aria-label 替代 label
HTML 规范明确禁止 <optgroup> 嵌套——即不能在 <optgroup> 里再放一个 <optgroup>。浏览器会截断解析，第二层及以后的分组会被丢弃。
aria-label 或 title 无法替代 label：屏幕阅读器只读 label 属性值，其他属性对分组语义无效。
-
<optgroup label="数据库"><optgroup label="SQL"><option>PostgreSQL</option></optgroup></optgroup>❌ 内层<optgroup>被忽略，“SQL”不会显示 -
<optgroup aria-label="数据库"><option>MySQL</option></optgroup>❌ 屏幕阅读器不读 “数据库”，用户不知道这是哪组 -
<optgroup label="数据库"><option>MySQL</option></optgroup>✅ 语义清晰，无障碍友好
label 属性，或者误以为能套娃分组。只要记住：一个 <select>、若干 <optgroup label="xxx">、每个里面塞 <option>，就稳了。 
