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