是html原生唯一标准的下拉分组方式，必须嵌套在内、仅包裹、label属性必填且非空，禁用整组需直接加disabled，自身无value、不可选、不提交，语义清晰且无障碍友好。
用 <optgroup></optgroup> 给 <select></select> 做语义化分组
直接上结论：<optgroup></optgroup> 是 HTML 原生支持的、唯一标准的下拉分组方式，它不依赖 JS，语义清晰，屏幕阅读器能识别，且所有现代浏览器都兼容。别试图用 <div> 模拟或靠 CSS 伪类“假装”分组——那样既不可访问，又破坏表单语义。
<h3>
<code><optgroup></optgroup> 的基本结构和必须属性
它必须嵌套在 <select></select> 内，且只能包裹 <option></option>，不能嵌套其他 <optgroup></optgroup>。关键点只有一个：label 属性必须存在，且值不能为空字符串（否则部分浏览器会忽略该组）。
常见错误：漏写 label，或写成 name="xxx"（无效）、title="xxx"（不生效）。
<select><optgroup label="前端框架"> <option value="react">React</option> <option value="vue">Vue</option> </optgroup> <optgroup label="后端语言"> <option value="python">Python</option> <option value="go">Go</option> </optgroup></select>
禁用整组时，disabled 要加在 <optgroup></optgroup> 上
想让某类选项整体不可选？别给每个 <option></option> 单独加 disabled，直接在 <optgroup></optgroup> 上加即可。这样更简洁，且逻辑一致——组禁用后，其内所有 <option></option> 自动继承禁用状态，包括键盘导航时无法聚焦。
-
<optgroup label="实验性" disabled></optgroup>—— 正确，整组灰显且不可交互 - 只给
<option disabled></option>加禁用但不加在<optgroup></optgroup>—— 可行但维护成本高，且无法表达“分类维度本身不可用”的语义 -
<optgroup disabled></optgroup>里混入未禁用的<option></option>—— 无效，所有子项仍被禁用
样式限制与可访问性注意事项
<optgroup></optgroup> 本身不能设置 value，也不能被 JS 选中或提交；它的 label 文本默认加粗+缩进，但不同浏览器渲染略有差异（如 Safari 不缩进）。CSS 能控制的非常有限：color、font-weight 可用，但 background-color 大部分浏览器不支持（Chrome/Firefox 仅支持 label 行背景，不影响 option）。
真正要注意的是：别用 <optgroup></optgroup> 做视觉装饰。如果只是想换颜色/加图标，应该用 JS 渲染自定义下拉；如果目标是提升表单结构清晰度和无障碍支持，就老实用原生 <optgroup></optgroup>，并确保 label 文字准确反映分组意图（比如 “中国大陆城市” 比 “城市A” 更有用）。
