零基础教你学前端-31、下拉菜单

节课，我们学习表单下拉菜单控件。

当用户点击选择框的时候，会弹出一个下拉列表，用户可以从列表中选择一个选项，我们称这个控件为下拉菜单。下拉菜单随处可见：购物商品配送的地址信息选择，

出生年月日的生日信息选择等等。

在HTML中如何定义一个下拉菜单呢?

可以使用 select 标签来定义，select 是选择的意思。基本语法为：<select><option></option></select>

select 标签包含一个或多个 option 子标签。option 是选项的意思，定义了一个可以被选择的选项。<option></option>。

注意：select标签里面只能放置 option 标签。

打开编辑器，新建一个 select_option.html 页面，自动补全基础代码，在body标签内部编写一个 form 表单标签，在 form 标签里面添加文本出生日期：。回车换行。

接着添加一个 select 标签，默认 emmet 会给 select 定义 id 和 name 属性，我们先删除这两个属性，以后我们会接触到他们。

在 select 标签内部，使用 emmet 语句：option{199$}*9 自动生成一组 1991 年到 1999 年的选项。这里的 value 属性在后面介绍，先不用理睬它。

在浏览器中打开页面，一个简单的下拉菜单做好了。鼠标点击控件，弹出选项菜单，选中其中一个可以更换下拉菜单的选项。

刷新页面，我们发现，默认情况下，第一个 option 1991 年作为当前选项，我们可以修改这个默认值吗？

要更改默认选项，需要给 option 标签添加一个默认选择的 selected 属性。

回到编辑器，在 1995 年的 option上定义 selected 属性。保存。

回到浏览器，刷新。1995 年就是默认的选项了。

有时，我们还会遇到这样的多选下拉菜单，如何实现呢？

我们只需要给 select 标签定义一个 multiple 属性即可。multiple 是多个的意思，允许用户选择一个以上的值。

回到编辑器，在 select 标签结束的地方回车换行，添加一个 br，再回车换行。

再添加一个 select 标签，在标签内部定义一个 option 标签，鼠标光标停留在当前行，同时按住键盘的 alt 和 shift 键不放，再敲击 7 下键盘的下箭头，复制出 7 个新的 option 标签。

分别在 option 标签内部填入音乐，电影，短视频，游戏，盲盒，漫画，小说，前端。最后给 select 定义一个属性 multiple，保存。

回到浏览器，刷新。使用ctrl 配合鼠标点击，就可以选择多个值了。

现在 select 控件的默认可见行数为 4 行，可以设置这个值吗？

给 select 标签定义 size 属性可以定义控件的默认可见行数，size 是尺寸的意思，值是一个数字。

回到编辑器，给 select 标签再添加第一个 size 属性，值为8，保存。

回到浏览器，刷新。下拉菜单的全部选项都显示了。

表单下拉菜单的制作我们就讲完了，大家快来试一试吧！

配套视频「链接」

们熟悉的标准HTML输入控件包括input,select,textarea等；比如通过改变input的value属性值，就可输入内容到文本输入框中。
有些网页表单为了实现特殊的效果和功能，可以不使用这些控件，通过客户端脚本生成特殊的输入方式。手工填表不受影响，如果自动填表就需要使用特殊的方式。

非标准下拉列表框填写示例.png

方法一：手工填表后，观察源码变化，发现填写的内容出现在<span>a5</span>元素中。那么我们填表的思路就是直接修改这个元素的值。获取span元素，“填写”它的text文本内容为a3，可以看到网页也对应的发生变化。但提交表单时，如果是非input元素，可能无法提交填写的值，需进一步测试。

方案二：使用自动点击操作，完全跟人工填表步骤一样，先点击下拉箭头，等待0.1秒，然后在选项中点击对就的选项元素。几乎所有下拉列表控件都可以用这种方法填写。

图片添加区域链接的基本写法

首先我们看看效果：

实现这样的功能需要学习以下几点内容。

1.认识<img/><map><area/></map>基本结构

首先复制一个html框架，命名为“图片区域链接.html”,示例代码如下：

<!DOCTYPE HTML> 
  <html>  
  <head>   
  <title>图片区域链接</title>  
  <meta charset="utf-8">  
  </head>   
  <body>  

  </body>   
  </html>

向<body></body>中添加<img><map><area/></map>基本结构，示例代码如下：

 <body>  
 <img/>
   <map>
   <area/>
   </map>
 </body>

指定要添加区域链接的图片的路径，如下：

 <img src="img/image1.jpg"/>
   <map>
   <area/>
   </map>

让<img>标签通过<map>的名字来驱使<map>为自己工作。

需要两步，第一，给<map>起名字，name=“map”，为了兼容所有的浏览器，还要加上id=“map”（有的浏览器只认id）。

第二，让<img>叫出<map>的名字或id，usemap="#map"。大家要注意，叫名字时要加#。这个在之前的教程中也经常出现。

示例代码如下：

 <img src="img/image1.jpg" usemap="#map"/>
   <map name="map" id="map">
   <area/>
   </map>

下面来划分区域。

2.为图片划分区域的方法

<area>是用来划分区域的标签，area也是“”区域“”的意思。

默认的shape（形状）属性有“矩形（rect）”、“圆形（circ）”、“多边形（poly）”三个值。

分别添加三个形状，示例代码如下：

 <img src="img/image1.jpg" usemap="#map"/>
   <map name="map" id="map">
   <area shape="rect"/>
   <area shape="circ"/>
   <area shape="poly"/>
   </map>

下面我们就要为区域规定参数，也就是在图像上的位置和范围大小。

为<area>添加coords属性可以指定区域的位置和范围。

如果shape="rect" 则coords由四个参数组成。例如coords="0,0,50,50"。从左到右，两两一组，组成两个平面坐标，即（0,0）和（50，50），单位是“像素”，矩形区域如下：

如果shape=“circ”，coords=“50,50,10”。（50,50）定义了圆心，10是半径。如图：

如果shape=“poly”，coords的参数不少于3对！注意是“对”！从左到右，两个数就是一组坐标，三组坐标可以确定一个三角形，多组坐标可以确定多边形。例如

这组参数画出了下图中歼20的边框线（600像素*400像素，如果图像的长宽像素数变了，参数就不正确了），如图：

这时，大家会有一个问题：如何才能知道图像中某个像素点的坐标呢？

3.使用Gimp软件精准定位图片区域

使用Gimp软件可以解决这个问题。

Gimp是一款类似于Photoshop的数字图像处理软件，不同的是，Gimp是开源免费的。

下载地址：https://www.gimp.org/

双击安装即可，注意选择一下安装目录。

完成安装之后打开，界面如下：

点击“文件”找到“打开”：

选择要打开的图片名字：

点击名称后，右边会有图像预览，点击“打开”即可：

打开后如图：

把鼠标放到图像的任意位置，看左下角：

这里就会显示我们鼠标所在的像素坐标数值。

这样我们就能方便地写“poly”的coords了。

请在空闲时找一张图片演练一下吧！

4.为区域添加链接

在<area/>标签中添加href属性即可指定链接路径，如下：

href="https://www.zhihu.com/question/284642168"

添加title属性可以在鼠标滑过链接区域时提示读者，如下：

title="歼20气动外形分析"

今天的内容结束了，图像区域链接在使用时还有一些注意事项，我们下次再详细讨论。

使用碎片时间，学习完整知识！关注大鱼师兄，一起精研技艺。

整合营销服务商

零基础教你学前端-31、下拉菜单

图片添加区域链接的基本写法

目录

您的项目需求