明輝手游網(wǎng)中心:是一個免費提供流行視頻軟件教程、在線學習分享的學習平臺!

HTML標簽:img標簽的用法總結

[摘要]本篇文章給大家?guī)淼膬?nèi)容是關于HTML標簽:img標簽的用法總結,有一定的參考價值,有需要的朋友可以參考一下,希望對你有所幫助。一、Img標簽有兩個重要的屬性:  1.src 屬性:圖片的地址  2.alt 屬性:圖片不顯示是現(xiàn)實的文字二、Img標簽是行級元素:  img、input屬于行內(nèi)替...
本篇文章給大家?guī)淼膬?nèi)容是關于HTML標簽:img標簽的用法總結,有一定的參考價值,有需要的朋友可以參考一下,希望對你有所幫助。

一、Img標簽有兩個重要的屬性:

  1.src 屬性:圖片的地址

  2.alt 屬性:圖片不顯示是現(xiàn)實的文字

二、Img標簽是行級元素:

  img、input屬于行內(nèi)替換元素。height/width/padding/margin均可用。效果等于塊元素。行內(nèi)非替換元素,例如, height/width/padding top、bottom/margin top/bottom均無效果.只

  能用padding left/right和margin left/right改變寬度。

三、Img標簽進行居中:

  1、第一種方式:這種方式我不是很喜歡,Img標簽有事不能設置為table-cell。容易產(chǎn)生錯誤。

img_p{
        display: table-cell;vertical-align: middle;  /*控制圖片垂直居中*/
        text-align: center;  /*控制圖片水平居中*/      }

  2、第二種方式:這種方式Img標簽最好不要帶有margin屬性,否則不會居中。

img{
    position: absolute;top:50%;left: 50%;
    transform:translate(-50%,-50%);    
}

四、Img標簽事件:

  1、使用HTML DOM Event 對象的 onerror事件可以對顯示異常的圖片進行處理。

<img src="img/1.jpg" alt="這是一張圖片" onerror="alert(this.alt)">

相關文章推薦:

html布局:html三列布局的實現(xiàn)代碼

innerHTML屬性是什么?innerHTML屬性的用法

以上就是HTML標簽:img標簽的用法總結的詳細內(nèi)容,更多請關注php中文網(wǎng)其它相關文章!


網(wǎng)站建設是一個廣義的術語,涵蓋了許多不同的技能和學科中所使用的生產(chǎn)和維護的網(wǎng)站。