是html原生语义化分组标签，必须嵌套在内且仅包裹，label属性必需否则分组不显示；支持disabled禁用整组选项但标题仍可见；css定制能力极弱，移动端常忽略样式，高定制需js模拟下拉。
<optgroup></optgroup> 是 HTML 原生支持的语义化分组标签，必须嵌套在 <select></select> 内，且只能直接包裹 <option></option>，不能嵌套其他元素或自身。
必须用 label 属性，否则分组不显示
浏览器只通过 label 属性渲染分组标题，<optgroup></optgroup> 本身没有内容区域。省略该属性会导致该组不可见（部分浏览器可能显示为空行或忽略整个 <optgroup></optgroup>）。
常见错误写法：<optgroup><option value="a">Apple</option></optgroup> —— 这里没加 label，分组标题不会出现。
正确写法示例：
<select><optgroup label="水果"> <option value="apple">苹果</option> <option value="banana">香蕉</option> </optgroup> <optgroup label="蔬菜"><option value="carrot">胡萝卜</option></optgroup></select>
<optgroup></optgroup> 里的 <option></option> 不能禁用整个分组
disabled 属性作用于单个 <option></option> 或整个 <optgroup></optgroup>，但行为有差异：
- 给
<optgroup disabled></optgroup>加disabled，该组所有<option></option>灰显且不可选（但依然存在 DOM 中） - 给某个
<option disabled></option>单独加，只禁用那一项 - 注意：禁用的
<optgroup></optgroup>仍会显示其label，只是内部选项不可交互
例如：<optgroup label="待上线" disabled><option value="new">新功能</option></optgroup> —— 标题“待上线”可见，但选项无法点击。
样式限制多，原生不支持深度定制
浏览器对 <optgroup></optgroup> 的 CSS 支持极弱：
-
color、font-style在多数浏览器中生效（如让分组标题变灰） -
background-color基本无效（Chrome/Firefox/Safari 均不支持） - 无法设置内边距、高度、伪元素（如
::before） - 移动端（尤其是 iOS Safari）对
<optgroup></optgroup>样式几乎完全忽略
如果需要高定制分组样式（比如带图标、悬停效果），得放弃原生 <select></select>，改用 JS 渲染的下拉组件（如 Select2、Choices.js 或自研 <div> 模拟）。
<p>真正要注意的是：分组逻辑必须由后端或 JS 动态生成时，确保 <code>label 值不为空、不重复，且每个 <optgroup></optgroup> 至少包含一个启用的 <option></option>——否则用户看到空分组，体验断裂。
