1.圖像標(biāo)簽簡介
在 HTML 標(biāo)簽中,<img> 標(biāo)簽用于定義 HTML 頁面中的圖像。
<img src="圖像URL" />
src 是<img>標(biāo)簽的必須屬性,它用于指定圖像文件的路徑和文件名。
所謂屬性:簡單理解就是屬于這個圖像標(biāo)簽的特性。
2.圖像標(biāo)簽寫法
<img src="08-千璽.jpg" alt="親,圖片加載錯誤" title="這是千璽" width="300" border="15" />

img圖片屬性.png
注意:
1.圖像標(biāo)簽可以擁有多個屬性,各必須寫在標(biāo)簽名的后面。
2.屬性之間不分先后順序,標(biāo)簽名與屬性、屬性與屬性之間均以空格分開。
3.屬性采取鍵值對的格式,即 key=“value" 的格式,屬性 =“屬性值”。
4.圖片的width和height屬性只需要設(shè)置其中一個,另一個就會等比例縮放。同時(shí)設(shè)置兩個會使圖片壓縮失真。
3.路徑
3.1絕對路徑
3.1.1直接從根目錄開始寫圖片位置
<img src="D:\0code\day01\images\images2\12-千璽.jpg" alt="圖片無法加載" width="300" />
優(yōu)點(diǎn):
1.運(yùn)行環(huán)境簡單明了,不隨網(wǎng)頁位置的變化而變化。
2.比較安全。
缺點(diǎn):
1.當(dāng)html在別的電腦上打開,或者圖片更換了盤符之后,圖片就沒辦法在頁面中顯示,圖片的移植性較差。
3.1.2圖像地址https://
在網(wǎng)站上右鍵點(diǎn)擊復(fù)制圖像地址,寫入src中就可成功引入。
<img src="https://ac.gtimg.com/media/images/ac_logo.png" width="500" />
優(yōu)點(diǎn):
1.路徑簡單明了,便與搜索引擎搜索。
2.只要有網(wǎng)絡(luò),不管html文件怎么移動,圖片還能正常顯示。
缺點(diǎn):
不容易移植,如果網(wǎng)站域名變化,所有的圖片會全部失效。
3.2相對路徑
以html文件所在位置為參考基礎(chǔ),而建立出的目錄路徑。 即圖片相對于 HTML 頁面的位置。

路徑.gif
<img src="同一級路徑圖片名字.png" />
<img src="同一級路徑/下一級路徑圖片名字.png" />
<img src="../上一級路徑圖片名字.jpg" />
3.2.1圖片和html在同一級
直接書寫即可,一定要加上圖片的后綴名。
<img src="08-千璽.jpg" />
3.2.2圖片在文件的下一級
<img src="images/images2/12-千璽.jpg" />
<img src="同一級路徑圖片名字.png" />