更新時(shí)間：2015-02-09你要做的只是：首先告訴瀏覽器你要插入一張圖片（img），接著給出這張圖片的存放位置（src，代表“來(lái)源（source）”）就行了。準(zhǔn)備好圖片了嗎？
注意：img元素沒(méi)有尾標(biāo)簽，它與
一樣，不與特定的文本相關(guān)。
“david.jpg”是要插入的圖片的文件名，其中的“jpg”表明圖片類型。就像后綴名“htm”代表文件是HTML文檔一樣，后綴名“jpg”表明文件是一個(gè)圖片文件。有三種類型的圖片文件可被插入網(wǎng)頁(yè)中：
GIF（Graphics Interchange Format，圖形交換格式）
JPG或JPEG（Joint Photographic Experts Group，聯(lián)合圖像專家組）
PNG（Portable Network Graphics，可移植網(wǎng)絡(luò)圖像）
一般來(lái)說(shuō)，GIP是圖形和圖畫(huà)的最佳格式，而JPEG格式則更適合存放照片。原因有二：第一，GIF格式只支持256色，而JPEG格式支持?jǐn)?shù)百萬(wàn)色；第二，GIF格式擅長(zhǎng)于壓縮簡(jiǎn)單圖像，而JPEG則更適于壓縮復(fù)雜圖像。壓縮率越高，圖像文件就越小，頁(yè)面加載速度就越快。也許你也有同感，包含太多無(wú)用內(nèi)容的網(wǎng)頁(yè)是很不受歡迎的。
過(guò)去，GIF和JPEG是兩大主要的圖像格式，但是最近PNG格式也開(kāi)始流行起來(lái)（主要是在取代GIF格式）。PNG格式擁有許多JPEG與GIF的共同優(yōu)點(diǎn)：支持?jǐn)?shù)百萬(wàn)色，且壓縮效果好。
圖片從何處獲得？
要制作自己的圖像，需要有一個(gè)圖像編輯程序。圖像編輯程序是從事美觀的網(wǎng)頁(yè)制作所需的重要工具之一。
不幸的是Windows或其他操作系統(tǒng)都沒(méi)有自帶比較好的圖片編輯程序。所以，也許你得買(mǎi)一個(gè)Paint Shop Pro、PhotoShop或者M(jìn)acromedia Fireworks，這三個(gè)是目前市場(chǎng)上最好的圖像編輯軟件。
不過(guò)還是那句話，完成本教程的學(xué)習(xí)不需要購(gòu)買(mǎi)任何昂貴的軟件。你可以先下載一個(gè)Irfan View用，這是一個(gè)很不錯(cuò)的圖像編輯軟件。因?yàn)槭亲杂绍浖�，所以你可以免費(fèi)使用它。
或者，你也可以從我們網(wǎng)站下載一些圖片來(lái)用，但請(qǐng)注意不要違反有關(guān)版權(quán)規(guī)定。具體下載方法如下：
右擊網(wǎng)頁(yè)中的圖像。
在菜單中選擇“圖片另存為...”。
選擇圖片的存放位置，然后點(diǎn)擊“保存”。
按此方法將下面的圖片保存到你的HTML文檔所在目錄。（注意：將它保存為PNG文件，文件名為logo.png）：
現(xiàn)在你可以把這個(gè)圖片插入到自己的網(wǎng)頁(yè)里。自己試試看。
關(guān)于圖像就這么多嗎？
關(guān)于圖像，還有一些是需要介紹的。
首先，你可以輕易地把存放在其他文件夾、甚至其他網(wǎng)站的的圖片插入到自己的網(wǎng)頁(yè)中。
例2：
例3：
其次，圖片也可以作為鏈接：
例4：
有什么屬性需要了解的嗎？
你總要用src屬性來(lái)告訴瀏覽器圖片的存放位置。除此以外，還有一些有用的屬性。
alt屬性用于給出圖像的替用描述，假如由于某些原因該圖像未能顯示出來(lái)，瀏覽器就通過(guò)顯示這個(gè)描述來(lái)替代圖像。對(duì)于有視力障礙的人士來(lái)說(shuō)，或者當(dāng)網(wǎng)頁(yè)打開(kāi)很慢的時(shí)候，這一特性顯得尤為重要。所以說(shuō)，始終記得寫(xiě)alt屬性：
例5：
有些瀏覽器會(huì)在鼠標(biāo)光標(biāo)移到圖像上時(shí)顯示出alt屬性的文本。但是，在使用alt屬性時(shí)請(qǐng)注意，該屬性的目的是為圖片提供一個(gè)替用描述，有視力障礙的人士會(huì)利用alt屬性來(lái)聽(tīng)取有關(guān)圖片的描述，所以不要將該屬性用于顯示文本提示——那是title屬性的功能。
例6：
如果你把鼠標(biāo)光標(biāo)停留在該圖片上（別點(diǎn)擊它），提示文字“上HTML.net網(wǎng)站學(xué)習(xí)HTML”便會(huì)出現(xiàn)。
另外兩個(gè)重要的屬性是width和height：
例7：
width和height屬性分別用于設(shè)置圖像的寬度和高度，以像素為單位。像素（pixel）是用于測(cè)量屏幕分辨率的計(jì)量單位。（目前大多數(shù)屏幕分辨率是1024×768或更高）。像素跟公分不同，像素是一種相對(duì)計(jì)量單位，一個(gè)像素的實(shí)際大小跟屏幕分辨率有關(guān)。在高分辨率顯示模式下，差不多25個(gè)像素等于1公分；而在低分辨率顯示模式下，同樣的25個(gè)像素大約等于1.5公分。
如果你沒(méi)有為圖像設(shè)置寬度和高度，它將按原始尺寸顯示。但是如果設(shè)置了的話，你就可以控制它的顯示尺寸：
例8：
但是值得注意的是，雖然可以通過(guò)設(shè)置高度和寬度來(lái)控制圖片的顯示尺寸，但圖片文件的實(shí)際大小不會(huì)因此而發(fā)生變化。所以，不要指望通過(guò)設(shè)置圖片的寬度和高度來(lái)減小圖片文件的大小。相反，你應(yīng)該在圖像編輯程序中來(lái)調(diào)整圖片文件的大小，以加快頁(yè)面加載速度。
不過(guò)width和height屬性還是有用的，它們可以在圖片被完全下載之前令瀏覽器知道該用多大的空間來(lái)顯示圖片。這令瀏覽器可以更快顯示出美觀的頁(yè)面。
關(guān)于圖像就說(shuō)這么多了。
