天天看點

課時21.img标簽(掌握)

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的縮寫,是“交換,替換”的意思,它的作用就是用于告訴浏覽器,當需要顯示的圖檔找不到時顯示什麼内容