1.img標籤中的img其實是英文image的縮寫,所以img標籤的作用,就是告訴瀏覽器我們需要顯示一張圖片
2.img標籤格式:<img src=” “> img是標籤名稱,src是屬性
其實img標籤中的src是英文source的縮寫,所以img標籤中的src就是用來告訴img標籤,需要顯示的圖片名稱
3.注意點:
和H系列標籤/p標籤/還有hr標籤不一樣,img標籤不會獨佔一行(可以用開發者工具中element來驗證,選中img標籤,看下是否佔據一整行)
如果我們手動指定了img標籤顯示的圖片的寬度和高度,有可能會導致圖片變形了,那麼如果又想指定寬度和高度,又不想圖片變形,我們可以只指定寬度和高度其中一個值即可,如果只指定了寬度,系統會自動計算高度,如果指定了高度,系統會自動計算寬度,並且都是等比例拉伸的,也就是說不會變形的。
4.其它的一些屬性:
width:寬度
height:高度
所以在img標籤中width/height這兩個屬性的作用,就是用來告訴img標籤將來需要顯示圖片有多寬多高
如果img標籤沒有指定需要顯示的圖片的寬高,那麼系統會按照圖片預設的寬高來顯示,如果img標籤指定了寬高,那麼系統會按照指定的寬高來顯示
title:用於告訴瀏覽器,當滑鼠懸停在圖片上時,需要彈出的描述框中顯示什麼內容
alt:其實是英文alternate的縮寫,是“交換,替換”的意思,它的作用就是用於告訴瀏覽器,當需要顯示的圖片找不到時顯示什麼內容