img
<img>表示image圖像嚼蚀，從技術(shù)上講，<img>標(biāo)簽并不會在網(wǎng)頁中插入圖像，而是從網(wǎng)頁上鏈接圖像隔崎。<img>標(biāo)簽創(chuàng)建的是被引用圖像的占位空間今艺。
【必須屬性】
1、src:地址
2爵卒、alt:圖像替代文本虚缎，供探索引擎抓取使用
【可選屬性】
1、height:圖像高度
2技潘、width:圖像寬度
3遥巴、ismap:為圖像定義為服務(wù)器端圖像映射
4、longdesc:與alt屬性類似享幽，提供多于1024字符的長文本描述
5铲掐、usemap:為圖像定義客戶端圖像映射 usemap = "#<map>元素的name或id屬性"
<img src="test.jpg" alt="測試圖片" width="100" height="100">
6、srcset:指定圖片的地址和對應(yīng)的圖片質(zhì)量值桩。屬性格式：圖片地址 寬度描述w 多個(gè)資源之間用逗號分隔摆霉。對于srcset里面出現(xiàn)了一個(gè)w單位，可以理解成圖片質(zhì)量奔坟。如果可視區(qū)域小于這個(gè)質(zhì)量的值携栋，就可以使用，當(dāng)然咳秉，瀏覽器會自動選擇一個(gè)最小的可用圖片婉支。但是，會發(fā)現(xiàn)隨著瀏覽器窗口寬度變大澜建，圖片也在不斷變大
注意：瀏覽器會自動匹配最佳顯示的圖片向挖，如果大圖既然緩存了就用大圖了，再縮小也不會變成小圖了
<img src="small.jpg" srcset="small.jpg 300w,middle.gif 500w,big.gif 800w">
7炕舵、sizes:用來設(shè)置圖片的尺寸零界點(diǎn)何之，主要跟響應(yīng)式布局打交道。屬性格式為：媒體查詢 寬度描述(支持px)咽筋，多條規(guī)則用逗號分隔
注意：如果加上sizes屬性溶推，會發(fā)現(xiàn)，隨著瀏覽器寬度變大奸攻，圖片一直保持其初始尺寸蒜危。所以，應(yīng)該sizes和srcset兩個(gè)屬性配合使用
<img src="small.jpg" srcset="small.jpg 300w,middle.gif 500w,big.gif 800w" sizes="(max-width:300px) 300px, (max-width:500px) 500px,800px">
8睹耐、crossorigin:使得在canvas中使用圖片資源時(shí)可以突破跨域限制
<img alt="plane" src="test.jpg" crossorigin="anonymous">
figure
<figure>元素代表一段獨(dú)立的內(nèi)容舰褪，經(jīng)常與說明(caption)<figcaption> 配合使用，并且作為一個(gè)獨(dú)立的引用單元疏橄。figure通常用來插入圖片占拍，但它也可以是一段代碼略就、圖片、音樂或者視頻
【默認(rèn)樣式】
margin: 16px 40px;
figcaption
figcatption用來定義figure元素的標(biāo)題晃酒，且應(yīng)該位于figure元素的第一個(gè)或最后一個(gè)子元素的位置表牢。figure中只能包含一個(gè)figcaption
<figure>
<img src="abc.jpg" alt=""/>
<figcaption>
Website analytics for test...
</figcaption>
</figure>
map
<map>與 <area>屬性一起使用來定義一個(gè)圖像映射
注意：<img>中的usemap屬性可引用<map>中的id或name屬性(取決于瀏覽器)，所以應(yīng)同時(shí)向<map>添加id和name屬性贝次。
area
<area>用來定義圖像熱區(qū)崔兴，<area>總是嵌套在<map>標(biāo)簽中
【必須屬性】
1、alt:替代文本
【可選屬性】
1蛔翅、coords:定義可點(diǎn)擊區(qū)域的坐標(biāo)
2敲茄、href:定義此區(qū)域的目標(biāo)URL
3、nohref:排除某個(gè)區(qū)域(html5中已廢棄)
4山析、shape:定義區(qū)域的形狀
a堰燎、圓形(circ/circle) coords= "x,y,r" x,y是圓心坐標(biāo)；r是半徑
b笋轨、多邊形(poly/polygon) coords = "x1,y1,x2,y2,x3,y3……" x,y是多邊形每個(gè)頂點(diǎn)的坐標(biāo)
c秆剪、矩形(rect/rectangle) coords = "x1,y1,x2,y2" x1,y1是左上角坐標(biāo)；x2,y2是右下角坐標(biāo)
d爵政、全部區(qū)域default(默認(rèn))
注意：<area>標(biāo)簽采用"先來先得"的順序仅讽，如果區(qū)域有重疊，以先出現(xiàn)的<area>為準(zhǔn)
<img src="jihe.jpg" alt="幾何圖形" width="600" height="220" usemap="#map">
<map name="map" id="map">
<area shape="rect" coords="35,38,150,158" href="line4.html" alt="四邊形">
<area shape="poly" coords="175,109,193,44,268,41,296,109,233,151" href="line6.html" alt="六邊形">
<area shape="poly" coords="315,81,330,58,356,40,387,37,411,52,430,79,433,108,418,132,389,153,357,154,333,137,315,108" href="line12.html" alt="12邊形">
<area shape="circle" coords="512,95,60" href="line0.html" alt="圓形">
</map>
一個(gè)不是計(jì)算機(jī)專業(yè)的理科生钾挟，轉(zhuǎn)行學(xué)前端
如果你也有一個(gè)編程夢洁灵，這是咱們的前端學(xué)習(xí)QQ群：784-783-012
（在線學(xué)習(xí)，8個(gè)月時(shí)間掺出，目前就業(yè)徽千，廣州工作，月薪16k）
