用于在 中分组 ，必填 label 属性，不可嵌套、不可选、不提交值，仅提供语义化分组与无障碍支持。
用 <optgroup></optgroup> 包裹同类 <option></option> 实现分组
HTML 中没有独立的“分组选择器”，但 <optgroup></optgroup> 元素专为这个目的设计：它必须嵌套在 <select></select> 内，且只能包含 <option></option>，不能嵌套其他 <optgroup></optgroup> 或交互元素。
常见错误是把 <optgroup></optgroup> 放在 <select></select> 外，或试图给它加 value 属性（它本身不可选，也不提交值）。
-
label属性必填，否则分组标题不显示；中文、空格、符号均可，但不要含 HTML 实体（如 - 浏览器默认将分组标题置灰、加粗，并缩进其下的
<option></option>，无需 CSS 即可识别层级 - 所有
<option></option>必须有value，否则提交时该选项为空字符串，哪怕文本可见
分组后 value 和 text 的取值逻辑不变
JavaScript 获取选中项时，select.value 仍返回所选 <option></option> 的 value 属性值，与是否在 <optgroup></optgroup> 中无关；select.selectedOptions[0].text 返回的是 <option></option> 标签内的文本，不是 <optgroup></optgroup> 的 label。
容易混淆的点：有人误以为分组能改变表单提交结构——实际提交数据仍是 name=value 键值对，分组信息不会被发送。
- 若需在后端区分分组，得靠
value命名约定，例如value="fruits_apple"或加前缀字段 - 用
querySelector找某个分组下的选项时，写法是select.querySelector('optgroup[label="水果"] option')，注意引号嵌套 - 禁用整个分组？不行。只能逐个设
<option disabled></option>，<optgroup disabled></optgroup>在部分浏览器（如 Safari）不生效
无障碍与键盘导航下分组的实际表现
屏幕阅读器会读出 <optgroup label="..."></optgroup> 的 label，然后依次读每个 <option></option>，中间有自然停顿。这是分组真正起作用的关键场景——纯视觉分隔不如语义化分组可靠。
但要注意：如果 <optgroup></optgroup> 下没有可用 <option></option>（全 disabled），某些读屏工具可能跳过该分组，用户无法感知其存在。
- 避免空分组：删掉
<optgroup label="暂无分类"></optgroup>这类占位写法 - 不要用
<optgroup></optgroup>替代分类筛选逻辑——它不提供折叠/展开，也不响应点击 - 移动端 iOS Safari 对
<optgroup></optgroup>的 label 字体大小支持不稳定，建议用简单短语，避免换行
<option></option> 时忘了归属到对应 <optgroup></optgroup>，结果它出现在最顶部，破坏逻辑层级。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
