首頁 >web前端 >html教學 >HTML標籤:img標籤的用法總結

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

不言
不言原創
2018-08-08 09:38:334566瀏覽

這篇文章帶給大家的內容是關於HTML標籤:img標籤的用法總結,有一定的參考價值,有需要的朋友可以參考一下,希望對你有幫助。

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

  1.src  屬性:圖片的位址

  2.alt  屬性:圖片不顯示是現實的文字

二、Img標籤是行級元素:

  img、input屬於行內替換元素。 height/width/padding/margin皆可使用。效果等於塊元素。行內非替換元素,例如, height/width/padding top、bottom/margin top/bottom皆無效果.只

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

三、Img標籤進行居中:

  1、第一種方式:這種方式我不是很喜歡,Img標籤有事不能設定為table-cell。容易產生錯誤。

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三列佈局的實作程式碼

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

以上是HTML標籤:img標籤的用法總結的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn