optgroup 是 html5 中用于 select 下拉菜单的语义化分组标签，不可选且不提交值，仅通过 label 属性归类 option 项以提升可读性与可访问性；必须直接嵌套于 select 内，不可嵌套或混入其他元素，现代浏览器完全支持。
optgroup 标签是 HTML5 中专为下拉菜单（select）设计的语义化分组工具，它本身不可选，仅用于视觉和逻辑上归类 option 项，提升可读性与可访问性。正确使用能显著优化用户快速定位目标选项的体验。
基础用法：用 label 属性定义分类标题
每个 optgroup 必须包含 label 属性，该文字会显示为灰色加粗（浏览器默认样式），作为该组的标题。它不能被选中，也不参与表单提交。
示例：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
嵌套限制与结构规范
optgroup 只能直接嵌套在 select 内，不能嵌套在另一个 optgroup 中，也不允许包含除 option 外的其他元素（如 div、span）。
- ✅ 正确：select → optgroup → option
- ❌ 错误：select → optgroup → optgroup → option（不支持多级分组）
- ❌ 错误：select → optgroup → div → option（破坏语义结构）
可访问性与用户体验优化技巧
屏幕阅读器会朗读 optgroup 的 label，帮助视障用户理解选项归属。为提升交互体验，建议：
- 保持每组 label 简洁明确（如“华东地区”优于“地理位置-第一大区”）
- 按用户认知习惯排序分组（如地域、价格区间、功能类型），而非纯字母顺序
- 避免单选项分组（如一个 group 里只有一条 option），这会增加视觉噪音
- 配合 CSS 微调样式时，勿隐藏 label 或破坏层级结构（例如不要用
display: none隐藏 optgroup）
兼容性与注意事项
所有现代浏览器（Chrome、Firefox、Safari、Edge）均完整支持 optgroup，包括移动端系统自带选择器。需注意：
- 部分旧版 Android WebView 对样式支持有限，但语义和功能正常
- JavaScript 动态创建时，确保先创建
optgroup元素再 appendoption，否则可能被忽略 - 服务端接收数据时，只收到
option的value，optgroup不传值——这是预期行为，无需额外处理
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
