編程學習：html圖片標簽和相對路徑以及絕對路徑的說明

圖片標簽的介紹

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

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

特點：

單標簽img標簽需要展示對應的效果，需要借助標簽的屬性進行設置

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

屬性注意點：

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

2、標簽上可以同時存在多個屬性

3、屬性之間以空格隔開

4、標簽名與屬性之間必須以空格隔開

5、屬性之間沒有順序之分

圖片標簽的alt屬性

屬性名：alt

屬性值：替換文本

當圖片加載失敗時，才顯示alt的文本

當圖片加載成功時，不會顯示alt的文本

圖片標簽的title屬性

屬性名：title

屬性值：提示文本

當鼠標懸停時，才顯示的文本

注意點：title屬性不僅僅可以用于圖片標簽，還可以用于其他標簽

圖片標簽的width和height屬性

屬性名：width和height

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

注意點：如果只設置width或height中的一個，另一個沒設置的會自動等比例縮放（此時圖片不會變形）

如果同時設置了width和height兩個，若設置不當此時圖片可能會變形

絕對路徑

絕對路徑：指目錄下的絕對位置，可直接到達目標位置，通常從盤符開始的路徑

例如：

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

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

相對路徑

概念普及

當前文件：當前的html網(wǎng)頁

目標文件：要找到的圖片

相對路徑：從當前文件開始出發(fā)找目標文件的過程

相對路徑分類

1、同級目錄：當前文件和目標文件在同一目錄中

代碼步驟：直接寫目標文件的名字即可

方法一

<img src="目標圖片.gif">

方法二

<img src="./目標圖片.gif">

2、下級目錄：目標文件在下級目錄中

代碼步驟

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

2、進入這個文件夾→/

3、此時看到目標文件直接喊她→直接寫目標文件名字

3、上級目錄：目標文件在上級目錄中

代碼步驟：

1、先出當前文件夾，到上一級目錄../

2、此時看到目標文件直接喊她→直接寫目標文件