影象標記及屬性碼動未來教案篇
在頁面中，屬於影象的標記並不太多，但在頁面佈局時，功能卻非常強大，如圖片和圖片熱點的功能，既豐富了頁面的內容，又使內容的佈局更加形象和生動，此外，svg標記的引入，使使用者通過編寫程式碼製作高解析度圖形的想法成為可能。
技能目標
通過本小節的學習，掌握img>標記的基本使用方法，理解該標記兩個必添屬性的運用場景和實現方法，可以在頁面中通過新增該元素實現圖片的展示。
語法格式
img src=’目標/原始檔’ alt=’無法顯示圖片時的替代文字’ />
格式說明
img標記可以向頁面中新增一幅圖片，通過標記的“src”屬性指定圖片的來源地址，“alt”屬性指定在圖片無法顯示時，標記區域所顯示的文字內容。
案例演示
接下來通過一個簡單的案例來演示這個標籤使用的方式，需求：使用img>標記載入一幅圖片，根據上述功能，新建一個名稱為h5_1.html在頁面中加入程式碼。
<!doctype html>
html>
head>
meta charset=“utf-8”>
title>無標題文件
/head>
body>
img width=“150px”
height=“150px”
src=“images/h5.png”
alt=“這是h5圖示” />
/body>
/html>
頁面檔案h5_1.html在chrome瀏覽器執行後：
案例實踐
新建一個頁面，新增一個img>標籤，通過該標籤在頁面中顯示一張圖片，並新增寬度和高度屬性及“alt”屬性，觀察這些屬性各種實現的功能。
擴充套件知識
在頁面中，img>標記擁有多個基本的屬性，如Id、Name、Class等，但從本質上來講，頁面中並沒有通過img>標記嵌入圖片，而只是建立了圖片佔位符的空間，通過圖片的物理連結來顯示這張圖片。
技能目標
掌握figure>標記的使用方法，並理解該標記的應用場景，能夠使用該標記製作出包含圖片和文字效果的頁面。
語法格式
figure />
格式說明
figure標記定義單獨包裹影象流內容，此外，在該標記內，還可以通過新增figcaption>標記宣告包裹內容的主題資訊。
需求：使用figure>標記包裹一個img>標記，通過img>標記載入一幅圖片，並新增圖片的標題，根據上述功能，新建一個名稱為h5_2.html在頁面中加入的程式碼。
<!doctype html>
html>
head>
meta charset=“utf-8”>
title>無標題文件
/head>
body>
figure>
figcaption>圖片標題/figcaption>
img src=“images/h5.png”
alt=“無圖片時的提示文字”
width=“150px”
height=“150px” />
/figure>
/body>
/html>
頁面檔案h5_2.html在chrome瀏覽器執行後
案例實踐
新建一個頁面，通過figure>標記包括多張圖片，並在該標籤中新增figcaption>標記，實現圖文並茂的頁面效果。
擴充套件知識
figure>是HTML5新增的、專用於包裹圖片流的標記，使用它比使用div>包裹圖片流更優化，體現在搜尋引擎中爬蟲的的查詢，使用figure>標記更容易被查詢到包裹的圖片流。
技能目標
掌握map>影象熱點標記的基本使用方法，理解map>包裹的area>子標記的運用技巧，能結合img>標記，製作出一個帶影象熱點效果的頁面。
語法格式
map>
area>/area>
/map>
格式說明
實現影象的熱點連結，先向map>標記新增“id”屬性，用於img>標記中的“usemap”屬性對應值，實現兩個標記間的繫結；此外，area>標記必須被包裹在map>標記內，通過該元素定義連結時的位置區域，該標記可以是新增多個，實現圖片中多個熱點的連結。
案例演示
需求：通過map>標記，實現圖片中，各個不同區域熱點的點選連結效果，根據上述功能，新建一個名稱為h5_3.html在頁面中加入。
<!doctype html>
html>
head>
meta charset=“utf-8”>
title>無標題文件
/head>
body>
figure>
figcaption>影象熱點標記/figcaption>
img src=“images/ex1.png”
alt=“這是一幅方向圖片”
usemap=“hotmap” />
/figure>
map id=“hotmap” name=“hotmap”>
area shape=“rect”
coords=“30,50,70,90”
href =“a.html” />
area shape=“rect”
coords=“100,50,140,90”
href =“b.html” />
/map>
/body>
/html>
頁面檔案h5_3.html在chrome瀏覽器執行後
案例實踐
新建一個頁面，在頁面中新增一幅中國地圖的圖片，並在圖片中藉助map>標記，實現按省份設定影象熱點區域的效果。
擴充套件知識
map>標記中包含了一個非常重要的area>標記，當該標記的“shape”屬性值為“rect”時，它的“coords”為對角線的座標；當該標記的“shape”屬性值為“circ”時，它的“coords”為圓心的座標和半徑的值。
更多內容請新增微信：madongweikai，或掃描下方二維碼新增
