img tag
img tag在html5主要可用的屬性有，alt、height、ismap、src、usemap、width、srcset、sizes，
下面個別介紹各屬性
一、alt
<!DOCTYPE html> <html> <body> <img src="smilaey.gif" alt="Smiley face"> </body> </html>
當圖片無法顯示時，則alt屬性可用來替代因圖片無法顯示的區塊，用來做為輔助說明。
二、src
<!DOCTYPE html> <html> <body> <img src="http://www.cwb.gov.tw/V7/images/icon/cwbLogo04.png"> </body> </html>
此屬性為必要項，用來指定顯示圖片的路徑。
三、width
<!DOCTYPE html> <html> <body> <img src="http://i.imgur.com/sRivwJE.gif" alt="Smiley face" width="42" height="42"> </body> </html>
width屬性為指定圖片的寬度，當頁面被讀取時，不管原始圖片寬度為何，
一律調整至指定寬度。width屬性值並不需要特別寫出px單位，只需寫出數字即可。
width屬性值在html4.01時可為px、%，但在html5時，width屬性值只可為px，
個人認為這樣做很好，跟CSS中的width屬性配合時又分得更清楚了。
註：img tag中的width屬性與CSS中的width屬性，一般人可能會搞混在一起。
要比較其差別請參考CSS width與min-width與max-width
四、height
height屬性為指定圖片的高度，其特性跟width屬性一樣，請參考上例。
五、ismap
當有設定此屬性時，其作用讓滑鼠點選該圖片時，
將會傳滑鼠在圖片上所點擊的座標給server端。
參考範例
<!DOCTYPE html> <html> <body> <a href="/action_page.php"> <img src="w3html.gif" alt="W3Schools.com" width="100" height="132" ismap> </a> <p>Click the image, and the click coordinates will be sent to the server as a URL query string.</p> </body> </html>
六、usemap
在圖片上指定n個座標，而每一個座標都可指向一個連結。
參考範例
<!DOCTYPE html> <html> <body> <p>Click on the sun or on one of the planets to watch it closer:</p> <img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap"> <map name="planetmap"> <area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm"> <area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm"> <area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm"> </map> </body> </html>
七、srcset與sizes
如下範例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> </head> <body> <img src="http://i.imgur.com/UGfZUtA.jpg" width="600" height="420" srcset="http://i.imgur.com/UGfZUtA.jpg 500w, http://i.imgur.com/0JPGXFQ.jpg 600w, http://i.imgur.com/UEo33aV.png 1000w" sizes="100vw"> </body> </html>
說明：
1、img元素裡指定寬度為600px，高度為420px這是有效的。
2、不考慮Retina螢幕下，而且sizes屬性預設為100vw時，
srcset其中屬性值 500w 意指當瀏覽器的寬度為 0~500px以內(包含500px)，
則秀出http://i.imgur.com/UGfZUtA.jpg 第一張圖，接下來的600w，
意指為當瀏覽器的寬度為 501px~600px以內(包含600px)時，則秀出第二張圖，
而1000w意指為當瀏覽器的寬度為 601px~1000px以內(包含1000px)時，則秀出第三張圖，
那超過1000px呢？由於沒有第四張圖了，所以也是秀第三張圖。
3、當sizes屬性值由100vw改成50vw時會有什麼變化？
變成瀏覽器的寬度為 0~1000px以內(包含1000px)會秀出第一張圖，
瀏覽器的寬度為 1000~1200px以內(包含1200px)會秀出第二張圖，以此類推。
我們發現了一特性，當srcset其中屬性值 500w，而且sizes屬性值為50vw時，
原本瀏覽器寬度要拉超過500px才會變第二張圖，
但現在要拉到「所指定的srcset屬性值 500px，佔螢幕寬度的50%」，也就是超過1000px才會變第二張圖。
4、sizes屬性值的用法不只這樣，典型的用法如下
sizes="(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 984px) 61vw, (max-width: 1362px) 45vw, 600px"
5、srcset與sizes屬性為一起出現的缺一不可。
參考資料：