用于下拉列表分组，核心是语义清晰、视觉引导、键盘友好；需按用户认知逻辑分组（如大洲、业务维度），label简短明确，禁用嵌套，配合键盘操作与CSS微调提升可读性与可访问性。
用 <optgroup></optgroup> 给下拉列表分组，不是为了“炫技”，而是让超长选项（比如 50+ 条）变得可读、可定位、可筛选。核心在于语义清晰 + 视觉引导 + 键盘友好，三者缺一不可。
用 label 准确表达分组逻辑
分组不是随便切块，得按用户认知习惯来。比如国家列表，别按字母 A–Z 平均分 10 组，而应按大洲（Asia、Europe…）；商品类目别按数据库 ID 排序，而应按业务维度（热销款、新品、清仓款）。label 值要简短明确，中文建议 2–4 字，避免“其他未分类项”这类模糊表述。
- ✅ 推荐：
<optgroup label="华东"></optgroup>、<optgroup label="服务器类型"></optgroup> - ❌ 避免：
<optgroup label="Group 1"></optgroup>、<optgroup label="Miscellaneous stuff"></optgroup>
嵌套结构要扁平，禁用多层 optgroup
HTML5 规范不支持 <optgroup></optgroup> 嵌套。试图写 <optgroup><optgroup>...</optgroup></optgroup> 会导致内层被浏览器忽略或渲染异常。如果真需二级分类（如“华东 → 上海/江苏/浙江”），有两个务实方案：
- 把二级项作为普通
<option></option>，用缩进符号（如● 上海）或前缀（[上海] 云服务器）在文本中体现层级 - 改用 JS 插件（如 Select2、Choices.js）实现真正的树形下拉，但需权衡加载体积和无障碍支持
配合键盘操作提升筛选效率
原生 <select></select> 支持键盘快速跳转：键入首字母自动定位到首个匹配项（如连按 “zhe” 可直达“浙江”）；方向键上下浏览时，焦点会自然跳过分组标签，不会停在 <optgroup></optgroup> 上。为强化体验，注意三点：
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
- 每个
<option></option>的文本内容必须以关键词开头（如“浙江杭州”比“杭州（浙江）”更易被首字母定位） - 同一分组内选项保持字母或业务顺序排列，避免跳转时来回折返
- 不要给
<optgroup></optgroup>设disabled——它本就不能选，加了反而干扰屏幕阅读器识别
样式微调增强视觉分区（仅 CSS，不破坏语义）
浏览器默认的 <optgroup></optgroup> 样式较弱。可用 CSS 加粗 label、增加上边距、设浅灰背景，但注意兼容性：
-
optgroup { font-weight: bold; margin-top: 8px; }—— 多数现代浏览器支持 -
optgroup::before { content: "▶ "; color: #666; }—— 不推荐，伪元素在<optgroup></optgroup>上无效 - 真正安全的定制：用
option[data-group="华东"]配合 JS 打标，再针对性加样式
不复杂但容易忽略。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
