img標簽介紹
介紹
img: 英文全稱 image（影像），代表的是一張圖片，
如果要想在網頁中顯示影像，就可以使用img 標簽，它是一個單標簽，語法如下：
<img src=https://www.cnblogs.com/lihonghong/archive/2020/11/07/"圖片的URL" />能插入的圖片型別
- 能夠插入的圖片型別是：jpg(jpeg)、gif、png、bmp等，
- 不能往網頁中插入的圖片格式是：psd、ai等，
HTML頁面不是直接插入圖片，而是插入圖片的參考地址，所以要先把圖片上傳到服務器上，
img標簽的src屬性
這里涉及到圖片的一個屬性：
- src屬性：指圖片的路徑，英文名稱 source，
在寫圖片的路徑時，有兩種寫法：相對路徑、絕對路徑
寫法一：圖片的相對路徑
相對當前頁面所在的路徑，兩個標記 . 和 .. 分表代表當前目錄和上一層目錄，
舉例1：
<!-- 當前目錄中的圖片 -->
<img src=https://www.cnblogs.com/lihonghong/archive/2020/11/07/"2.jpg">
<img src=https://www.cnblogs.com/lihonghong/archive/2020/11/07/".\2.jpg">
<!-- 上一級目錄中的圖片 -->
<img src=https://www.cnblogs.com/lihonghong/archive/2020/11/07/"..\2.jpg">相對路徑不會出現這種情況：
aaa/../bbb/1.jpg../要么不寫，要么就寫在開頭，
舉例2：
<img src=https://www.cnblogs.com/lihonghong/archive/2020/11/07/"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=https://www.cnblogs.com/lihonghong/archive/2020/11/07/"../../photo/1.png" />寫法二：圖片的絕對路徑
絕對路徑包括以下兩種：
（1）以盤符開始的絕對路徑，舉例：
<img src=https://www.cnblogs.com/lihonghong/archive/2020/11/07/"C:\Users\qianguyihao\Desktop\html\images\1.jpg">（2）網路路徑，舉例：
<img src=https://www.cnblogs.com/lihonghong/archive/2020/11/07/"http://img.smyhvae.com/20200122_200901.png">大家打開上面的img中的鏈接，可能有驚喜哦，
相對路徑和絕對路徑的總結
相對路徑的好處：站點不管拷貝到哪里，檔案和圖片的相對路徑關系都是不變的，相對路徑使用有一個前提，就是網頁檔案和你的圖片，必須在一個服務器上，
問題：我的網頁在C盤，圖片卻在D盤，能不能插入呢？
答案： 用相對路徑不能，用絕對路徑也不能，
注意：可以使用file://來插入，但是這種方法，沒有任何意義！因為服務器上沒有所謂c盤、d盤，
下面的方法是行的，但是沒有任何工程上的意義，這是因為服務器沒有盤符，linux系統沒有盤符：
<img src=https://www.cnblogs.com/lihonghong/archive/2020/11/07/"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=https://www.cnblogs.com/lihonghong/archive/2020/11/07/"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（已廢棄）：指圖片上下的邊距，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/206090.html
標籤：其他