img标簽介紹
介紹
img: 英文全稱 image(圖像)，代表的是一張圖檔。
如果要想在網頁中顯示圖像，就可以使用img 标簽，它是一個單标簽。文法如下：
能插入的圖檔類型
- 能夠插入的圖檔類型是：jpg(jpeg)、gif、png、bmp等。
- 不能往網頁中插入的圖檔格式是：psd、ai等。
HTML頁面不是直接插入圖檔，而是插入圖檔的引用位址，是以要先把圖檔上傳到伺服器上。
img标簽的src屬性
這裡涉及到圖檔的一個屬性：
- src屬性：指圖檔的路徑。英文名稱 source。
在寫圖檔的路徑時，有兩種寫法：相對路徑、絕對路徑
寫法一：圖檔的相對路徑
相對目前頁面所在的路徑。兩個标記 . 和 .. 分表代表目前目錄和上一層目錄。
舉例1：
相對路徑不會出現這種情況：
aaa/../bbb/1.jpg
../要麼不寫，要麼就寫在開頭。
舉例2：
上方代碼的意思是說，目前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。
答案：
寫法二：圖檔的絕對路徑
絕對路徑包括以下兩種：
(1)以盤符開始的絕對路徑。舉例：
(2)網絡路徑。舉例：
大家打開上面的img中的連結，可能有驚喜哦。
相對路徑和絕對路徑的總結
相對路徑的好處：站點不管拷貝到哪裡，檔案和圖檔的相對路徑關系都是不變的。相對路徑使用有一個前提，就是網頁檔案和你的圖檔，必須在一個伺服器上。
問題：我的網頁在C槽，圖檔卻在D盤，能不能插入呢？
答案： 用相對路徑不能，用絕對路徑也不能。
注意：可以使用file://來插入，但是這種方法，沒有任何意義！因為伺服器上沒有所謂c盤、d盤。
下面的方法是行的，但是沒有任何工程上的意義，這是因為伺服器沒有盤符，linux系統沒有盤符：
總結一下：
無論是在 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。
舉例：
效果：
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(已廢棄)：指圖檔上下的邊距。