html下拉菜单分组核心是用标签对内选项逻辑分组，必须为直接子元素、通过label属性定义不可选标题，不支持嵌套，屏幕阅读器可读，提升可访问性与可读性。

用 HTML 实现下拉菜单分组，核心是使用 <optgroup></optgroup> 标签对 <select></select> 中的选项进行逻辑分组，浏览器会自动渲染为带标题的分组样式，且分组标题不可选。

基础结构：用 包裹

<optgroup></optgroup> 必须放在 <select></select> 内部，通过 label 属性定义分组名称。每个分组内可包含多个 <option></option>，但不能嵌套其他 <optgroup></optgroup>。

示例：

html-ppt-to-pdf

将使用 `

` 约定的 HTML 幻灯片转换为高保真、矢量文本 PDF（使用 Playwright + Chromium 原生 PDF 功能）。

下载

  
    html">HTML
    CSS
    JavaScript
  
  
    Python
    Java
  

注意事项与常见限制

• 分组标题不可选、不可交互：点击 label 不会触发选择，也不会提交值；仅作视觉区分
• 不支持嵌套分组：<optgroup></optgroup> 不能包含另一个 <optgroup></optgroup>
• 部分旧版浏览器（如 IE8 及更早）对样式支持有限，但语义和功能基本可用
• 无障碍友好：屏幕阅读器会朗读分组标签，提升可访问性

增强可读性的小技巧

• 为 <select></select> 添加 name 和 id，便于表单提交和 JS 操作
• 给第一个 <option></option> 设为占位提示（如 <option disabled selected>请选择技术类别</option>），注意它不属于任何 <optgroup></optgroup>
• 避免在 label 中使用特殊符号或过长文字，保持简洁清晰

简单样式微调（可选）

原生 <optgroup></optgroup> 不支持直接设置颜色或字体，但可通过 CSS 针对 optgroup 做有限定制（兼容性因浏览器而异）：

select optgroup {
  font-weight: bold;
}
select option {
  padding-left: 1em;
}

注意：Safari 对 optgroup 的样式支持较弱，重点依赖语义而非外观。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！