編程學(xué)習(xí)：html圖片標(biāo)簽和相對(duì)路徑以及絕對(duì)路徑的說(shuō)明

圖片標(biāo)簽的介紹

場(chǎng)景：在網(wǎng)頁(yè)中顯示圖片

代碼：<img src=""alt="">

特點(diǎn)：

單標(biāo)簽img標(biāo)簽需要展示對(duì)應(yīng)的效果，需要借助標(biāo)簽的屬性進(jìn)行設(shè)置

標(biāo)簽的完整結(jié)構(gòu)圖：

屬性注意點(diǎn)：

1、標(biāo)簽的屬性寫在開始標(biāo)簽內(nèi)部

2、標(biāo)簽上可以同時(shí)存在多個(gè)屬性

3、屬性之間以空格隔開

4、標(biāo)簽名與屬性之間必須以空格隔開

5、屬性之間沒(méi)有順序之分

圖片標(biāo)簽的alt屬性

屬性名：alt

屬性值：替換文本

當(dāng)圖片加載失敗時(shí)，才顯示alt的文本

當(dāng)圖片加載成功時(shí)，不會(huì)顯示alt的文本

圖片標(biāo)簽的title屬性

屬性名：title

屬性值：提示文本

當(dāng)鼠標(biāo)懸停時(shí)，才顯示的文本

注意點(diǎn)：title屬性不僅僅可以用于圖片標(biāo)簽，還可以用于其他標(biāo)簽

圖片標(biāo)簽的width和height屬性

屬性名：width和height

屬性值：寬度和高度（數(shù)字）

注意點(diǎn)：如果只設(shè)置width或height中的一個(gè)，另一個(gè)沒(méi)設(shè)置的會(huì)自動(dòng)等比例縮放（此時(shí)圖片不會(huì)變形）

如果同時(shí)設(shè)置了width和height兩個(gè)，若設(shè)置不當(dāng)此時(shí)圖片可能會(huì)變形

絕對(duì)路徑

絕對(duì)路徑：指目錄下的絕對(duì)位置，可直接到達(dá)目標(biāo)位置，通常從盤符開始的路徑

例如：

盤符開頭：D:\day01\images1.jpg

完整的網(wǎng)絡(luò)地址：https://www.baidu.com/favicon.ico

相對(duì)路徑

概念普及

當(dāng)前文件：當(dāng)前的html網(wǎng)頁(yè)

目標(biāo)文件：要找到的圖片

相對(duì)路徑：從當(dāng)前文件開始出發(fā)找目標(biāo)文件的過(guò)程

相對(duì)路徑分類

1、同級(jí)目錄：當(dāng)前文件和目標(biāo)文件在同一目錄中

代碼步驟：直接寫目標(biāo)文件的名字即可

方法一

<img src="目標(biāo)圖片.gif">

方法二

<img src="./目標(biāo)圖片.gif">

2、下級(jí)目錄：目標(biāo)文件在下級(jí)目錄中

代碼步驟

1、先知道在哪個(gè)文件夾里面→文件夾名字

2、進(jìn)入這個(gè)文件夾→/

3、此時(shí)看到目標(biāo)文件直接喊她→直接寫目標(biāo)文件名字

3、上級(jí)目錄：目標(biāo)文件在上級(jí)目錄中

代碼步驟：

1、先出當(dāng)前文件夾，到上一級(jí)目錄../

2、此時(shí)看到目標(biāo)文件直接喊她→直接寫目標(biāo)文件