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