必须是的直接子元素且label非空，否则分组静默失效；嵌套错误、动态插入未用add()方法、iOS Safari不支持分组显示，需降级处理。
必须是 的直接子元素，漏写 label 或嵌套错位置，整组就静默消失——不是“没效果”，而是浏览器根本不解析它。
label 属性缺失或为空导致分组完全不可见
这是最常踩的坑： 没有 label，等于没写。浏览器不会报错， 仍照常显示，但分组语义丢失、屏幕阅读器不播报、键盘导航也不跳过分组间隙。
-
→ 标题不渲染，用户感知不到“水果”分组 -
或→ Chrome/Firefox 当无label处理；Safari 可能渲染空白行，造成视觉错位 - 服务端模板中用条件包裹（如
{% if group %}{% endif %}）时，必须确保{{name}}非空且已求值，否则结构断裂
嵌套结构错误让整个 optgroup 被浏览器忽略
只允许一层扁平结构，且只能作为 的**直接子元素**。任何嵌套、包裹或中间插入文本节点，都会被解析器丢弃。
-
→被跳过 -
→ 内层被忽略，可能只剩外层空标题 - 正确结构只有一种：
，和是同级节点
动态插入 optgroup 必须用 select.add() 且先赋值 label
不能用 appendChild() 往 插入 ，否则无效。必须调用原生 add() 方法，并在插入前显式设置 label。
htmlppt.skill
下载
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
- ✅ 正确：
const optgroup = document.createElement('optgroup'); optgroup.label = '国产车型'; select.add(optgroup); - ❌ 错误：先
select.appendChild(optgroup)，再设optgroup.label→ 不生效 - ❌ 错误：设了
optgroup.label，但对应尚未插入 DOM → 赋值被静默丢弃 - 往
内添加时，可用optgroup.appendChild(option)，没问题
iOS Safari 和部分旧版 Safari 对 optgroup 的支持极弱
iOS 原生 弹出层（系统 Picker）**完全不显示 **，所有选项扁平排列。Safari 16 及更早版本对 disabled 属性也完全忽略。
- 用户在 iPhone 上点开下拉，根本看不到“华东地区”“华北地区”等分组信息
-
在 Safari 中形同虚设，组内仍可点、可键盘聚焦、可提交 - 若业务强依赖分组语义，必须放弃原生
，改用 JS 实现的组件（如 Choices.js、tom-select），或服务端按平台做降级处理 - 底线方案：把关键信息放在
文本开头，例如，靠 Unicode 符号模拟层级，确保 Safari 至少能读到城市名
真正难的不是怎么写标签，而是 label 写什么、哪些项该归进同一组、以及要不要为 iOS 单独准备 fallback —— 这些决策一旦定错， 就只是 HTML 里一段安静的废代码。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
