Menu
CoddyTech

下拉菜单

本课属于 Coddy HTML 学习旅程的“基础知识”单元。第 43 课,共 60 课。

在 HTML 中,下拉菜单是用户点击或将鼠标悬停在某个元素上时显示的项目列表。下拉菜单常用于以紧凑的方式呈现选项列表。要创建下拉菜单,可以使用 <select> 标签,并用 <option> 标签表示各个选项。

以下是在 HTML 中创建下拉菜单的基本语法:

<select name="dropdown">
	<option value="value1">Option 1</option>
	<option value="value2">Option 2</option>
	<option value="value3">Option 3</option>
</select>
  • <select>:用于定义下拉菜单的标签。
  • name:为下拉菜单设置名称,以便在提交表单时识别所选的值。
  • <option>:用于定义下拉列表中一个选项的标签。
  • value:用于指定与该选项关联的值的属性。提交表单时,此值会发送到服务器。
  • Option text:下拉列表中每个选项显示的文本。

下面是一个创建包含三个选项的下拉菜单的示例:

<select name="colors">
	<option value="red">Red</option>
	<option value="green">Green</option>
	<option value="blue">Blue</option>
</select>

在这个示例中,我们有一个名称为 "colors" 的下拉菜单,其中有三个选项:Red、Green 和 Blue。 

challenge icon

挑战

简单

创建一个包含下拉菜单的 HTML 文档。表单应包含以下元素:

  1. 一个名称为 "fruits" 的下拉菜单。
  2. 下拉菜单应有四个选项,其值和文本如下:
  • 值:"apple",文本:"Apple"
  • 值:"banana",文本:"Banana"
  • 值:"orange",文本:"Orange"
  • 值:"grape",文本:"Grape"

亲手试试

<!DOCTYPE html>
<html>
    <body>
        <!-- 在这里编写代码 -->
    </body>
</html>
quiz icon自我测试

这节课包含一个小测验。开始学习即可作答,并记录你的进度。

基础知识中的所有课

自己练习: Web 在线编辑器