1.应用场景:在页面中,如果有多个选项让用户选择,并且想要节约页面空间时,我们可以使用
<select>表单控件定义下拉列表
语法:
<select>
<option>选项1</option>
<option>选项2</option>
<option>选项3</option>
....
</select>
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>select下拉表单</title>
</head>
<body>
<form>
籍贯
<select>
<option>北京</option>
<option>吉林</option>
<option>长春</option>
</select>
</form>
</body>
</html>
运行效果:
2.<select>中至少包含一对<option>
3.在<option>中定义selected="selected"时,当前项即为默认选中项。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>select下拉表单</title>
</head>
<body>
<form>
籍贯
<select>
<option>北京</option>
<option selected="selected">吉林</option>
<option>长春</option>
</select>
</form>
</body>
</html>
运行效果: