【自学HTML笔记第5篇】HTML中的下拉菜单标签

我们每个人都有瑕疵，不满别人的同时我们更应该去懂得理解和接受；

---

目录

下拉菜单标签：

代码演示：

select 标签常用属性：

代码演示：

option标签常用属性：

代码演示：

         如果觉得写的不错，就收藏该专栏吧！！！

---

我们在生活中可能会遇到这样的情况（如上图）：那么这样的菜单在HTML中是如何实现的呢？ 

下拉菜单标签：

在 HTML 中，下拉菜单是由 select 和 option 这两个表单标签一起使用来表示的。

语法使用：

<form>
    <select>
        <option>选项内容 1 </option>
         ……
        <option>选项内容 N </option>
    </select>
</form>

代码演示：

  <form >
    请选择城市<br>
    <select >
        <option value="">城市1</option>
        <option value="">城市2</option>
        <option value="">城市3</option>
        <option value="">城市4</option>
        <option value="">城市5</option>
    </select>
   </form>

效果：就是最上面的图片； 

select 标签常用属性：

代码演示：

         请选择你去过的城市<br>
    <select multiple  size="4">
        <option>城市1</option>
        <option>城市2</option>
        <option>城市3</option>
        <option>城市4</option>
        <option>城市5</option>
        <option>城市6</option>
        <option>城市7</option>
        <option>城市8</option>
    </select>

 

option标签常用属性：

属性	解释说明
selected	规定选项（在首次显示在列表中时）表现为选中状态。
value	定义送往服务器的选项值

代码演示：

    请选择的城市<br>
    <select  >
        <option value="no1">城市1</option>
        <option value="no2">城市2</option>
        <option value="no3">城市3</option>
        <option value="no4" selected>城市4</option>   
    </select>

 在没选择之前是默认城市4的；

如果觉得写的不错，就收藏该专栏吧！！！