零基礎教你學前端-31、下拉菜單

節課，我們學習表單下拉菜單控件。

當用戶點擊選擇框的時候，會彈出一個下拉列表，用戶可以從列表中選擇一個選項，我們稱這個控件為下拉菜單。下拉菜單隨處可見：購物商品配送的地址信息選擇，

出生年月日的生日信息選擇等等。

在HTML中如何定義一個下拉菜單呢?

可以使用 select 標簽來定義，select 是選擇的意思?；菊Z法為：<select><option></option></select>

select 標簽包含一個或多個 option 子標簽。option 是選項的意思，定義了一個可以被選擇的選項。<option></option>。

注意：select標簽里面只能放置 option 標簽。

打開編輯器，新建一個 select_option.html 頁面，自動補全基礎代碼，在body標簽內部編寫一個 form 表單標簽，在 form 標簽里面添加文本出生日期：?；剀嚀Q行。

接著添加一個 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、下拉菜單

圖片添加區域鏈接的基本寫法

目錄

您的項目需求

整合營銷服務商

零基礎教你學前端-31、下拉菜單

圖片添加區域鏈接的基本寫法

目錄

您的項目需求

零基礎教你學前端-31、下拉菜單