每天学习HTML标签之optgroup

最新推荐文章于 2025-09-28 10:47:37 发布

最新推荐文章于 2025-09-28 10:47:37 发布 · 219 阅读

文章标签：

#HTML #QQ

JS&HTML 专栏收录该内容

25 篇文章

订阅专栏

本文介绍如何利用HTML中的<optgroup>标签来更好地组织下拉列表的内容，通过实例展示了如何将相关的选项进行分组，使得下拉列表更易于理解和选择。

郁闷啊。想了好久才想起来这个标签。

一直在select标签下面只加option标签。可是有没有遇到过这种情况呢？

下拉列表框里的东西是分类的？比如说水果下拉框。里面要有南方产的，还要有北方产的。

下面是对应的水果。

那么这就需要我们用到optgroup标签了。

HTML <optgroup> 标签

定义和用法

定义选项组。此元素允许您组合选项。当您使用一个长的选项列表时，对相关的选项进行组合会使处理更加容易。

<html>
    <head>
        <title>optgroup</title>
    </head>
    <body>
        文字说明：
        <select>
            <optgroup label="大众">
                <option value ="伤害大众">伤害大众(我故意这么写的)   </option>
                <option value ="德国大众">德国大众(VW)</option>
            </optgroup>

            <optgroup label="QQ">
                <option value ="马化腾">马化腾</option>
                <option value ="吉瑞">吉瑞比QQ号贵，没好QQ号贵</option>
            </optgroup>
        </select>
    </body>
</html>