标签用于在中对选项逻辑分组，不可选中，仅作语义容器；需嵌套于内，用label定义名称，内部只容；不支持嵌套或disabled属性；css和js操作需注意兼容性与限制。
标签用于在 HTML5 的 下拉菜单中对选项进行逻辑分组，提升可读性和用户体验。它本身不可被选中，只作为视觉与语义上的分类容器。
基本用法与结构
必须嵌套在 内部，每个 通过 label 属性定义分组名称，内部只能包含 元素：
关键规则与限制
- 不能嵌套其他 或交互元素（如按钮、输入框）
- 不支持 disabled 属性直接禁用整个分组（但可为每个 单独设置）
- 部分旧版浏览器可能忽略 label 的样式，建议配合 CSS 增强可访问性
- 屏幕阅读器会朗读 label 值，帮助视障用户理解选项归属
增强可用性的实用技巧
- 用清晰、简短的中文 label（如“国内城市”“国际城市”），避免歧义
- 同一 中多个 应保持逻辑并列，不交叉、不重复
- 可通过 CSS 设置 optgroup { font-weight: bold; color: #555; } 突出分组标题
- 移动端注意：iOS Safari 对 的渲染较简略，需实机测试显示效果
与 JavaScript 配合的注意事项
JS 操作时， 是 HTMLOptGroupElement 类型节点，可通过 element.children 获取其下的 ，但不能直接设置 value 或 selected —— 这些属性只属于 。
动态添加分组时，推荐先创建 ，再逐个追加 ，最后插入到 中，避免渲染异常。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
