本文已参与「新人创作礼」活动，一起开启掘金创作之路。
第1关：下拉列表控件相关概念
相关知识
select控件
select控件可以创建选择框。可为用户提供一组选项，允许用户从中选取，通常呈现为下拉菜单的样式。
select控件的基本结构
下拉列表选择区是由<select>标签和<option>标签构成，其中<select>标签用来创建下拉列表，<option>标签定义了列表中的可用选项。基本结构如下：
<select name="">
<option value=" ">选项1</option>
<option value=" ">选项2</option>
...
</select>
select标签的常用属性
select标签的常用属性有：
- name：规定下拉列表的名称
- size：规定列表中可见选项的数目
- multiple：设定为多选
- disabled：禁用该下拉列表
select标签的新属性
HTML5中引入的select新属性有：
- autofocus：规定在页面加载时下拉列表自动获得焦点
- required：规定用户在提交表单前必须选择一个下拉列表中的选项
- form：定义 select 字段所属的一个或多个表单
option标签的常用属性
- disabled：规定该选项在首次加载时被禁用
- selected：规定该选项在首次加载时为选中状态
- value：定义送往服务器的选项值
通关知识
1、<select>标签用于创建（D）
A、表格
B、框架
C、单选框
D、下拉列表选框
2、<select>用于在表单中插入一个下拉列表框，它需要与哪个标签配合使用（C）
A、<list>
B、<item>
C、<option>
D、<dot>
3、设置下拉列表框中某项被默认选中的属性是(C)。
A、checked
B、check
C、selected
D、select
4、若设置下拉列表为多选，可在select标签中添加（B）属性。
A、selected
B、multiple
C、required
D、checked
5、下拉列表设置<select name="Fruit" size="3"> 表明（A）
A、可以看到3个下拉列表选项
B、有3个下拉列表选项
C、下拉列表控件的宽度为3
D、下拉列表字符长度为3
第2关：创建下拉列表
相关知识
创建下拉列表
select 元素可创建单选或多选菜单，可以通过size属性来设置选择框的行数。
option元素用于定义列表中的可用选项。
提示：select 元素是一种表单控件，可用于在表单中接受用户输入。
示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>创建下拉列表</title>
</head>
<body>
<form>
<select size="2">
<option value="SH">上海</option>
<option value="BJ">北京</option>
<option value="HB">湖北</option>
<option value="ZJ">浙江</option>
</select>
</form>
</body>
</html>
输出结果如下：
编程要求
根据提示，在右侧编辑器补充代码。
测试输入：创建一个下拉列表选择框，将选择框显示行数设置为两行,选项包括"玩游戏"“看电影”“听音乐”
预期输出：
通关代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>创建下拉列表</title>
</head>
<body>
<form action="" method="get">
<!-- ********* Begin ******* -->
<select size="2">
<option value="game">玩游戏</option>
<option value="mo">看电影</option>
<option value="music">听音乐</option>
</select>
<!-- ********* End ********* -->
</form>
</body>
</html>
第3关：设置多选和默认选项
相关知识
创建多选选择框
select元素的multiple属性用于定义选择框是否多选 提示： 对于 windows：按住 Ctrl 按钮来选择多个选项 对于 Mac：按住 command 按钮来选择多个选项
创建具有默认选项的选择框
option元素的select属性可以设置默认选项
示例如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>创建多选和默认选项</title>
</head>
<body>
<form action="" method="get">
<select multiple="multiple">
<option value ="peach">桃子</option>
<option value ="banana" selected>香蕉</option>
<option value="apple">苹果</option>
<option value="orange">橘子</option>
</select>
</form>
</body>
</html>
输出包括“猫”“狗”“鸟”“鸭子”，其中“猫”为默认选项。
预期输出：
通关代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>创建多选和默认选项</title>
</head>
<body>
<form action="" method="get">
<!-- ********* Begin ******* -->
<select multiple="multiple">
<option selected="selected">猫</option>
<option>狗</option>
<option>鸟</option>
<option>鸭子</option>
<select>
<!-- ********* End ********* -->
</form>
</body>
</html>
\
