Html之img標籤

　　我發現了爲何我不會開發，或者不肯意，我感受是由於我不會前端，自認爲寫出來完美的後臺顯示很差也沒人用，爲了解決這一問題，筆者新增html欄目，和你們一塊兒交流分享。

一.img必須有src和alt屬性

　　src屬性規定了顯示圖像的URL，瀏覽器會對該URL發起Http Get請求。

　　alt屬性則規定了圖像的替代文本，在圖像沒法顯示或者用戶禁用圖像顯示時，代替圖像顯示在瀏覽器中的內容。

　　可是我發現，其實你不加上alt屬性也不會報錯，不過筆者認爲加上的話這樣即便圖像沒法顯示，用戶仍是能夠看到的一些相關信息，從而大大提升了頁面的用戶友好性。

二.我發現用兩個img的話圖片是上下存在的，沒有在左右方向，如何解決呢

 

         

　　我先把兩個地址用逗號隔開放在一個src，發現徹底沒法顯示；後來我發現是由於顯示問題，兩個img寫在一塊兒，默認就是左右並排；

　　width值太大  致使你的頁面只能承載那麼多屬性多餘的屬性會在你下一行顯示，要有精確的佈局才能作出本身的效果。

2.1我得解決方案

　　第一個寬度爲50%，第二個佔用剩餘寬度，我記得是「*%」，後來發現不是；兩個都設置爲50%，發現仍是上下顯示，第二個索性不填了，顯示第二章圖的效果。因而我果斷把第一個img標籤前面加了一些空格" "，如今是第三幅效果，就是我博文右側邊欄了。

2.2遺留問題

　　控件佔用剩餘寬度，怎麼表示？

三.<img>標籤在HTML和XHTML中有什麼區別？

　　前者不須要結束標誌，在後這裏面必須被正確關閉。

四.爲何要指定height和width？

　　您在瀏覽網頁的時候，可能會遇到這種狀況：隨着頁面中的圖像加載併成功顯示，頁面上的內容會隨之發生不規律的移動，影響您的閱讀。這種狀況就是由於頁面上的圖像沒有定義height和width屬性而致使的。

　　若是沒有定義圖片的height和width屬性，那麼瀏覽器爲了可以顯示每個加載的圖像，它須要先下載圖像，而後解析出圖像的高度和寬度，並在顯示窗口留出相應的屏幕空間，這樣就會致使瀏覽器不斷地從新計算/調整頁面的佈局，這可能會延遲文檔的顯示，並致使頁面重繪。

　　所以，筆者建議使用<img>的 height 和 width 屬性來指定圖像的尺寸。這樣的話，瀏覽器在下載圖像以前就爲其預留出了空間，從而能夠加速文檔的顯示，還能夠避免文檔內容的移動而引發頁面重繪。

五.<img>標籤的onload/onerror/onabort事件，在什麼狀況下會被觸發？

　　onload: 事件會在圖像加載完成後當即發生。

　　onerror: 事件會在文檔或圖像加載過程當中發生錯誤時被觸發。

　　onabort: 事件會在圖像加載被中斷時發生。例如用戶單擊了瀏覽器的Stop按鈕，或者在圖像下載的過程當中。

六.如何獲知用戶是否禁止瀏覽圖片呢？

　　用戶是能夠設置瀏覽器不顯示圖片的，尤爲是在移動設備上，用戶爲了節省流量，每每會禁止圖片顯示。那麼，如何獲知用戶是否禁止瀏覽圖片呢？

　　在stackoverflow裏說是設置src的complete屬性，我如今用不到，無論了；我忽然感受，這是瀏覽器的事情，不顯示就不顯示吧，會出現alt，用戶本身也知道，因此我認爲這個問題不必管。

七.收穫

7.1 收穫1

　　笨方法就是最好的方法，其實不是該方法笨，而是本身根本想不到，說到底就是本身浮躁，不踏實。

7.2收穫2

　　不想學習，我就果斷回去睡覺，打遊戲。

八.參考文獻

　　http://www.cnblogs.com/hencehong/archive/2012/10/06/something_interesting_about_image.html