6-10 使用select、option标签创建下拉菜单
本节编程练习不计算学习进度，请电脑登录imooc.com操作

使用select、option标签创建下拉菜单

下拉列表在网页中也常会用到，它可以有效的节省网页空间。既可以单选、又可以多选。如下代码：

讲解：

1、select和option标签都是双标签，它总是成对出现的，需要首标签和尾标签。

2、select标签里面只能放option标签，表示下拉列表的选项。

3、option标签放选项内容，不放置其他标签。

4、value：

5、selected="selected"：

设置selected="selected"属性，则该选项就被默认选中。

在浏览器中显示的结果：

任务

我来试试：把“爱好”下拉列表的“旅游”选项设置为默认选项

1、在右部编辑器中的第13行补充代码 selected="selected"。

index.html 
  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <title>select下拉框</title>
  7. </head>
  8.  
  9. <body>
  10.     <form>
  11.         <select>
  12.             <option value="看书">看书</option>
  13.             <option value="旅游">旅游</option>
  14.             <option value="运动">运动</option>
  15.             <option value="购物">购物</option>
  16.         </select>
  17.     </form>
  18. </body>
  19.  
  20. </html>
下一节