HTML標簽：圖片標簽

 

img標簽介紹

介紹

img: 英文全稱 image（圖像），代表的是一張圖片。

如果要想在網頁中顯示圖像，就可以使用img 標簽，它是一個單標簽。語法如下：

<img src="圖片的URL" />

能插入的圖片類型

• 能夠插入的圖片類型是：jpg(jpeg)、gif、png、bmp等。

• 不能往網頁中插入的圖片格式是：psd、ai等。

HTML頁面不是直接插入圖片，而是插入圖片的引用地址，所以要先把圖片上傳到服務器上。

img標簽的src屬性

這里涉及到圖片的一個屬性：

• src屬性：指圖片的路徑。英文名稱 source。

在寫圖片的路徑時，有兩種寫法：相對路徑、絕對路徑

寫法一：圖片的相對路徑

相對當前頁面所在的路徑。兩個標記 . 和 .. 分表代表當前目錄和上一層目錄。

舉例1：

<!-- 當前目錄中的圖片 -->
<img src="2.jpg">
<img src=".\2.jpg">
​
<!-- 上一級目錄中的圖片 -->
<img src="..\2.jpg">

相對路徑不會出現這種情況：

aaa/../bbb/1.jpg

../要么不寫，要么就寫在開頭。

舉例2：

<img src="images/1.jpg">

上方代碼的意思是說，當前html頁面有一個並列的文件夾images，在文件夾images中存放了一張圖片1.jpg 效果：

相對路徑的面試題。現有如下文件層級圖：

問題：如果想在index.html中插入1.png，那么對應的img語句是？

分析：

現在document是最大的文件夾，里面有兩個文件夾work和photo。work中又有一個文件夾叫做myweb。myweb文件夾里面有index.html。 所以index.html在myweb文件夾里面，上一級就是work文件夾，上兩級就是document文件夾。通過document文件夾當做一個中轉站，進入photo文件夾，看到了1.png。

答案：

<img src="../../photo/1.png" />

寫法二：圖片的絕對路徑

絕對路徑包括以下兩種：

（1）以盤符開始的絕對路徑。舉例：

<img src="C:\Users\qianguyihao\Desktop\html\images\1.jpg">

（2）網絡路徑。舉例：

<img src="http://img.smyhvae.com/20200122_200901.png">
​

大家打開上面的img中的鏈接，可能有驚喜哦。

相對路徑和絕對路徑的總結

相對路徑的好處：站點不管拷貝到哪里，文件和圖片的相對路徑關系都是不變的。相對路徑使用有一個前提，就是網頁文件和你的圖片，必須在一個服務器上。

問題：我的網頁在C盤，圖片卻在D盤，能不能插入呢？

答案： 用相對路徑不能，用絕對路徑也不能。

注意：可以使用file://來插入，但是這種方法，沒有任何意義！因為服務器上沒有所謂c盤、d盤。

下面的方法是行的，但是沒有任何工程上的意義，這是因為服務器沒有盤符，linux系統沒有盤符：

<img src="file://C:\Users\qianguyihao\Pictures\明星\1.jpg" alt="" />

總結一下：

無論是在 a 標簽還是 img 標簽上，如果要用路徑。只有兩種路徑能用，就是相對路徑和絕對路徑：

• 相對路徑從自己出發，找到別人。

• 絕對路徑，就是http://或者https://開頭的路徑。

• 絕對不允許使用file://開頭的文件，這個是完全錯誤的！

img標簽的其他屬性

width、height 屬性

• width：圖像的寬度。

• height：圖像的高度。

width和height，在 HTML5 中的單位是 CSS 像素，在 HTML 4 中既可以是像素，也可以是百分比。可以只指定 width 和 height 中的一個值，瀏覽器會根據原始圖像進行縮放。

重要提示：如果要想保證圖片等比例縮放，請只設置width和height中其中一個。

Alt 屬性

• alt：當圖片不可用（無法顯示）的時候，代替圖片顯示的內容。alt是英語 alternate “替代”的意思，代表替換資源。

Alt屬性效果演示：

如上圖所示：當圖片 src 不可用的時候，顯示文字。這樣做，至少能讓用戶知道，這個圖片大概是什么內容。

title 屬性

• title：提示性文本。鼠標懸停時出現的文本。

title 屬性不該被用作一幅圖片在 alt 之外的補充說明信息。如果一幅圖片需要小標題，使用 figure 或 figcaption 元素。

title 元素的值一般作為提示條(tooltip)呈現給用戶，在光標於圖片上停下后顯示出來。盡管這確實能給用戶提供更多的信息，您不該假定用戶真的能看到：用戶可能只有鍵盤或觸摸屏。如果要把特別重要的信息提供給用戶，可以選擇上面提供的一種方法將其內聯顯示，而不是使用 title。

舉例：

<img src="images/1.jpg" width="300" height="`188" title="這是美女">

效果：

align 屬性

• 圖片的align屬性：圖片和周圍文字的相對位置。屬性取值可以是：bottom（默認）、center、top、left、right。

如果想實現圖文混排的效果，請使用align屬性，取值為left或right。

我們來分別看一下這align屬性的這幾個屬性值的區別。

1、align=""，圖片和文字低端對齊。即默認情況下的顯示效果：

2、align="center"：圖片和文字水平方向上居中對齊。顯示效果：

3、align="top"：圖片與文字頂端對齊。顯示效果：

4、align="left"：圖片在文字的左邊。顯示效果：

5、align="right"：圖片在文字的右邊。顯示效果：

其他已廢棄的屬性

• Align（已廢棄）：指圖片的水平對齊方式，屬性值可以是：top、middle、bottom、left、center、right。該屬性已廢棄，替換為 vertical-align這個CSS屬性。

• border（已廢棄）：給圖片加邊框，單位是像素，邊框的顏色默認黑色。該屬性已廢棄，替換為 border這個CSS屬性。

• Hspace（已廢棄）：指圖片左右的邊距。

• Vspace（已廢棄）：指圖片上下的邊距。