2、HTML ＜img＞标签（插入图片）
如果是 HTML 初學者，建議在使用圖片前新建一個存放圖片的文件夾，方便后期圖片的整理。這是一個良好的習慣。
開發過程中，經常使用圖像來美化頁面，圖像已經成為大多數網站的一個重要組成部分。都說一圖勝千言，好的圖像有助于制作出精美的網站，從而與那些外觀平平的網站區別開來。
在 HTML 中，使用 <img> 標簽來插入圖像，其語法格式如下：
<img src="url" /><img> 是圖片 image 的簡稱，它只包含屬性，沒有閉和標簽。
src 是它的必選屬性，用來表示圖片的路徑來源。
下面，我們來詳細分析一下 <img> 標簽的 src 屬性。
1. src屬性
src 是 source 的簡稱，用來聲明圖像文件的來源，也就是定義圖片的引用地址。圖片可以是.jpg、 .png、 .gif等多種格式，引用地址可以是相對 url，也可以是絕對 url。下面我們來看兩個示例。
1) 引用網絡圖片
可以這樣引用網絡圖片：
<img src="http://poolga.com/shared/images/poolgas/iphone_2122.png"/>
運行結果如下圖所示：
2) 引用本地圖片
如果在項目的當前文件中，想要引入上一層 image 目錄下的一張圖片 logo.jpg，可以這樣引用：
運行結果如下圖所示：
此處../可以進入上一層目錄，然后進入 image 文件夾，最后找到 img.jpg。
提示：圖片的名稱盡量不要使用中文，否則即使路徑正確，瀏覽器也可能無法識別，從而顯示不出圖片。
2. 其他屬性
前面講述了 <img> 標簽的必選屬性 src，接下來再看一下它的可選屬性。<img> 標簽常用的可選屬性有alt、title、width以及height等，我們來分別看一下：
- alt 屬性用來對圖像進行文本說明。一般情況下，當瀏覽器因某種原因無法載入圖像時，就會顯示這段文本。雖然 alt屬性值可以為空，但還是建議讀者給 alt 屬性設置符合圖像信息的文本；
- title 用來設置鼠標移動到圖片上的提示文字。它的值一般與 alt 的值相同，最大的區別是顯示的前提條件不同，alt屬性是圖片加載失敗后顯示，而 title 屬性則是圖片加載成功后鼠標放到它上面才顯示；
- width 用來設置圖片的寬度，使用時不需要加單位，默認是像素（px）；
- height 用來設置圖片的高度，和 width 一樣在使用時不需要加單位，默認是像（px）。
具體使用方法如下：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>img標簽</title> </head> <img src="image/tiger.png"width="200"height="200"title="虎頭虎腦"alt="虎頭虎腦" /> </body> </html>在瀏覽器中運行結果如下圖所示：
在這段代碼中，首先引入了文件的路徑，緊接著對圖片的寬高進行了設置，均是 200px；其次又設置了 title 屬性，當鼠標移動到圖片上時，會顯示 title 的內容；最后設置了 alt，當圖片加載不出來會顯示 alt 的內容。
建議讀者為頁面上的圖像都加上 alt 屬性，這樣不僅有助于更好的顯示信息，而且對于那些使用屏幕閱讀軟件（存在視覺障礙的人使用的一類軟件）的人來說幫助很大。
3. 總結
從上面的講述中我們可以收獲以下幾點內容：
- src 表示圖片的引用地址，這個地址可以是相對 url，也可以是絕對 url；
- alt 表示圖片加載失敗時顯示的內容；
- title 表示鼠標移動到圖片上時顯示的文字；
- width 表示圖片的寬，默認單位是像素（px）；
- height 表示圖片的高，默認單位也是像素（px）。
總結
以上是生活随笔為你收集整理的2、HTML ＜img＞标签（插入图片）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 1、网站是什么
- 下一篇： 3、HTML ＜a＞标签（超链接）