網(wǎng)頁設(shè)計(jì)與制作案例教程（HTML5+CSS3+JavaScript）（微課版）（第2版） 課件 案例4知識(shí)點(diǎn)02：HTML圖像標(biāo)記

我們畢業(yè)啦其實(shí)是答辯的標(biāo)題地方HTML圖像標(biāo)記HTML圖像標(biāo)記在網(wǎng)頁中經(jīng)常使用圖像，下面詳細(xì)介紹該標(biāo)記的使用網(wǎng)頁中常用的圖像格式：JPGGIFPNGHTML圖像標(biāo)記顯示顏色豐富特別為照片設(shè)計(jì)的的文件格式

有損壓縮的圖像格式HTML圖像標(biāo)記JPGHTML圖像標(biāo)記支持動(dòng)畫制作LOGO、小圖標(biāo)等相對(duì)單一的圖像支持透明無損壓縮GIFHTML圖像標(biāo)記體積更小不支持動(dòng)畫顏色過渡更光滑支持透明PNG<imgsrc="圖像路徑"alt="替換文本"title="提示文本"width="圖像寬度"height="圖像高度">語法格式：說明：height屬性設(shè)置圖像的高度src屬性設(shè)置圖像的來源，必需屬性alt屬性設(shè)置圖像不能顯示時(shí)的替換文本，必需屬性width屬性設(shè)置圖像的寬度title屬性鼠標(biāo)指向圖像時(shí)顯示的文本HTML圖像標(biāo)記srcalttitlewidthheightHTML圖像標(biāo)記例4-1：example01.htmlHTML圖像標(biāo)記（1）各瀏覽器對(duì)alt屬性的解析不同，有的瀏覽器不能正常顯示alt屬性的內(nèi)容。（2）width屬性和height屬性默認(rèn)的單位都是px（像素），也可以使用百分比。百分比實(shí)際上是相對(duì)于當(dāng)前容器的寬度和高度。（3）如果不設(shè)置<img>的width屬性和height屬性，則圖像按原始尺寸顯示；若只設(shè)置其中的一個(gè)屬性，則另一個(gè)屬性會(huì)按原圖等比例自動(dòng)設(shè)置。（4）為了加快網(wǎng)頁的下載速度，最好使用圖像處理軟件將圖像調(diào)整到合適大小再置入網(wǎng)頁中。注意HTML圖像標(biāo)記給圖像創(chuàng)建超鏈接給圖像創(chuàng)建超鏈接的方法與給文字創(chuàng)建超鏈接的方法一樣，在圖像標(biāo)記前后使用<a>和</a>標(biāo)記即可。

例4-2：example01.html

給圖像創(chuàng)建超鏈接

單擊第一個(gè)圖像跳轉(zhuǎn)到小米官網(wǎng)

單擊第二個(gè)圖像跳轉(zhuǎn)到圖像本身絕對(duì)路徑和相對(duì)路徑絕對(duì)路徑：包括本地絕對(duì)路徑和網(wǎng)絡(luò)絕對(duì)路徑兩種。本地絕對(duì)路徑：一般指從盤符開始，到文件名稱結(jié)束；網(wǎng)絡(luò)絕對(duì)路徑：包括協(xié)議名、網(wǎng)站域名、文件路徑名和文件名等。絕對(duì)路徑之所以稱為絕對(duì)，是指當(dāng)所有頁面引用同一個(gè)文件時(shí)，使用的路徑都是一樣的。D:/Web前端開發(fā)/源代碼/project01/images/fj.jpg/view/7410.html譬如：絕對(duì)路徑和相對(duì)路徑相對(duì)路徑：以當(dāng)前文件位置為參考點(diǎn)，到文件名稱結(jié)束。當(dāng)保存于不同目錄的網(wǎng)頁引用同一個(gè)文件時(shí)，所使用的路徑將不相同，故稱之為相對(duì)路徑。譬如：<imgsrc=“../fj.jpg”

alt=“圖像”>

引用上級(jí)文件

..表示退回到上一級(jí)目錄<imgsrc=“./fj.jpg”

alt=“圖像”>

引用同級(jí)文件

.表示當(dāng)前目錄<imgsrc=“images/fj.jpg"alt="圖像">

引用下級(jí)文件<imgsrc=

"../../fj.jpg"alt="圖像">

引用上上級(jí)文件說明：絕對(duì)路徑與相對(duì)路徑的不同之處，在于描述目錄路徑時(shí)，所采用的參考點(diǎn)不同。

引用網(wǎng)站內(nèi)部文件時(shí)通常使用相對(duì)路徑。小結(jié)圖像標(biāo)