基础下拉菜单用<select>作容器、<option>定义选项，value为提交值、标签内文字为显示内容；加selected设默认项，disabled禁用选项，multiple启用多选并配合size控制可见行数。
用 <select> 和 <option> 搭出基础下拉菜单
HTML 下拉菜单的核心就是 <select> 元素，它本身不显示选项，只提供容器和交互逻辑；所有可选内容必须用 <option> 子元素逐个声明。
常见错误是把文字直接写在 <select> 里（比如 <select>苹果、香蕉</select>），这不会生成选项，浏览器会忽略这些文本。
正确写法示例：
<select name="fruit"> <option value="apple">苹果</option> <option value="banana">香蕉</option> <option value="orange">橙子</option> </select>
-
value属性决定表单提交时实际发送的值，和显示文字可以不同（比如显示“北京”，value="bj"） - 没设
value的<option>，提交时会以标签内文本作为值（不推荐依赖这个行为） - 第一个
<option>默认被选中，加selected属性可显式指定（如<option selected>请选择</option>）
让下拉菜单有默认提示且不可提交
用户刚打开页面时，如果直接默认选中某个真实选项（比如“苹果”），可能造成误提交。更稳妥的做法是加一个占位选项，语义上表示“未选择”，并禁用它。
立即学习“前端免费学习笔记（深入）”；
关键不是靠 CSS 隐藏，而是用 disabled + selected + 空或提示性 value：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
<select name="city"> <option value="" disabled selected>-- 请选择城市 --</option> <option value="shanghai">上海</option> <option value="beijing">北京</option> </select>
-
disabled让该选项无法被再次选中（鼠标点不动，键盘也跳过） -
selected确保加载时显示它，但因disabled，表单提交时不会把它当有效值发送 -
value=""是保险做法：即使某些老浏览器对disabled selected支持不一致，空值也更容易被后端忽略
多选下拉菜单要加 multiple 属性
原生 <select> 支持多选，但必须显式添加 multiple 布尔属性，且用户操作方式和单选不同：需按住 Ctrl（Windows）或 Cmd（macOS）点击，或拖拽选择连续项。
浏览器渲染效果也会变化——默认高度变高，通常显示 4–6 行选项（可由 size 属性控制行数）。
<select name="hobbies" multiple size="4"> <option value="reading">阅读</option> <option value="swimming">游泳</option> <option value="coding">编程</option> </select>
- 提交时，同名字段会变成数组（如
hobbies=reading&hobbies=coding），后端需按数组接收 - 移动端多选体验较差，很多手机浏览器仍只允许单点（然后立刻关闭下拉），实际项目中常被自定义组件替代
-
size值设为 1 时，即使有multiple，视觉上仍是单行下拉，但功能上仍支持多选（需配合 Ctrl/Cmd）
不能只靠 HTML 实现搜索过滤或分组
原生 <select> 不支持输入搜索、虚拟滚动、图标、禁用部分选项等交互增强。想实现“带搜索的下拉”，必须用 JavaScript 配合自定义 DOM 结构（比如 <div> + <input> + <ul>）模拟。
常见的 <optgroup> 只能做静态视觉分组，不能折叠/展开，也不能禁用整个组：
<select>
<optgroup label="水果">
<option value="apple">苹果</option>
<option value="banana">香蕉</option>
</optgroup>
<optgroup label="蔬菜">
<option value="carrot">胡萝卜</option>
</optgroup>
</select>-
<optgroup>的label不可点击、不可选，纯属展示 - 没有标准方法让某组下的所有
<option>批量失效，只能逐个加disabled - 如果需要键盘导航（方向键切换）、A-Z 快速跳转、异步加载选项，必须自己实现逻辑，原生控件不提供这些能力
真正要用好下拉菜单，得清楚哪些事 HTML 能一步到位，哪些事它压根不管——比如语义结构和基础表单集成是它的强项，而交互细节和复杂状态管理，早该交给 JS 来补足。
