html下拉列表怎么做，html下拉列表代码怎么写-励北网

我们接着之前的内容继续，今天分享一下关于下拉列表的使用。很多时候我们需要在网页上显示一些内容具有互斥性，但是内容较多，如果都使用单选按钮，面积大，操作也不方便，就可以使用下拉列表框。

html下拉列表怎么做，html下拉列表代码怎么写

下拉列表框select：

下拉列表select和option标签需要配合使用。这个有点类似无序列表ul和li的关系。

语法：

示例代码：

<html> <head> <title>下拉列表</title> </head> <body> <select> <option>HTML</option> <option>CSS</option> <option>Javascript</option> </select> </body></html>

select标签属性
属性	说明
multiple	可选，默认下拉列表只能选择一项，开启此属性multiple="multiple"，可以选择多项
size	展开列表后可显示的数目

multiple属性语法：

示例代码：

<html> <head> <title>下拉列表</title> </head> <body> <select multiple="multiple"> <option>HTML</option> <option>CSS</option> <option>Javascript</option> </select> </body></html>

需要多项选择时，按住ctrl键即可。

size属性：

语法：

示例代码：

<html> <head> <title>下拉列表</title> </head> <body> <select size="2"> <option>HTML</option> <option>CSS</option> <option>Javascript</option> <option>HTML</option> <option>CSS</option> <option>Javascript</option> </select> </body></html>

浏览器差异，我们试着分别将size的取值为1,2,3时会发现它对360浏览器无效，而IE和火狐可以显示。这个是因为360浏览器最低有4个选项，不同的浏览器在解释HTML时有会差异，这个就是浏览器兼容性问题。

option标签：

option标签属性
属性	说明
value	选项的值
selected	当前选中

语法：

示例代码：

<html> <head> <title>option标签</title> </head> <body> <select> <option>1</option> <option>2</option> <option selected="selected">3</option> <option>4</option> <option>5</option> </select> </body></html>

option标签中value属性，主要是保存的值，是需要传送至服务器保存至数据库的键值。

按钮标签button：

之前的内容，我们分享过表单按钮<input type="button">，表单按钮使用的是input标签，而input标签是自闭合标签，没有结束符号。所以无法在表单按钮插入其他内容。

除了表单按钮以外，还有一种按钮使用button标签实现。

语法：

<button>文本或图像</button>

可以在开始和结束符之间，插入文本或者其他标签，功能会更强大些。

示例代码：

<html> <head> <title>按钮的区别</title> </head> <body> <button>button标签按钮</button><br> <input type="button" value="表单标签按钮"><br> </body></html>

从浏览器的预览效果上看，两个按钮是一样的，但是代码实现方式不一样，input标签按钮的文字是用value属性定义的，而button标签按钮的文字则是包裹在开始和结束之间定义的。

初学者会有疑问了，在前端开发中，到底是用input标签按钮，还是使用button标签按钮呢？

在前端开发中，表单是要涉及提交数据至服务器的，button按钮无法实现这个功能，因为我们都是使用input标签按钮的，基本不用button标签按钮。