導(dǎo)入：
字不如表，表不如圖，圖不如視頻。今天我們就來學(xué)習(xí)圖片以及在網(wǎng)頁中插入圖片。
網(wǎng)頁中常用圖片格式
常見圖片格式有：GIF、JPEG、PNG、TIF、BMP等等，在網(wǎng)頁中常用的是GIF、JPEG、PNG。
- JPEG格式
JPEG支持幾百萬種顏色（電腦最多能顯示1600多萬種顏色），適合于顯示照片等顏色細(xì)節(jié)豐富的精美圖像。不過它是有損壓縮，在壓縮時會丟失一些圖片細(xì)節(jié)，降低了最終文件的質(zhì)量。并且可利用壓縮比例控制圖像文件大小。 并且在編輯和重新保存JPG格式圖像時，這種下降損失會累積。JPEG不適用于所含顏色很少、具有大塊顏色相近的區(qū)域或亮度差異十分明顯的較簡單的圖片。 - GIF格式
GIF格式是一種無損壓縮格式。GIF格式可以存多幅彩色圖像，不過GIF只支持256種顏色。如果把存于一個GIF文件中的多幅圖像數(shù)據(jù)逐幅讀出并顯示到屏幕上，就可構(gòu)成一種最簡單的GIF動畫。GIF只支持1個bit的透明通道，所以只有透明和不透明兩種情況。 - PNG格式
PNG格式理論上是無損壓縮，常見的有分PNG8（可保存256種顏色無損失）、PNG24（保存1600多萬種顏色）和PNG32(保存1600多萬種顏色和256級透明度）。但是圖像顏色超過256種顏色而使用PNG8的話，也是會損失顏色。
理論上，PNG用來存儲灰度圖像時，灰度圖像的深度可多到16位，存儲彩色圖像時，彩色圖像的深度可多到48位，并且還可存儲多到16位的α通道數(shù)據(jù)等，但是Photoshop等軟件目前并不能到達(dá)這樣的標(biāo)準(zhǔn)。所以我們上面才只介紹PNG8、PNG24和PNG32。
image.png
插入圖片的語法與常用屬性
| 屬性 | 描述 |
|---|---|
| alt | 圖片的替換信息 |
| title | 圖片的提示信息 |
| width | 指定圖片顯示寬度 |
| height | 指定圖片顯示高度 |
1.基本語法：<img src="圖片文件路徑">
2.<img>常用屬性
| 屬性 | 描述 |
|---|---|
| alt | 圖片的替換信息 |
| title | 圖片的提示信息 |
| width | 指定圖片顯示寬度 |
| height | 指定圖片顯示高度 |
3.其它不建議屬性:border、align等等。
4.代碼示例：
<img src="../images/04-1.jpg" width="100" title="貓?jiān)诖蚶鲜? alt="貓打老鼠動畫" >
- 絕對路徑與相對路徑
- 絕對路徑：是從根目錄（如盤符或網(wǎng)站根目錄）開始的路徑，形如C:\windows\system32\cmd.exe
- 相對路徑：是從當(dāng)前路徑開始的路徑，如當(dāng)前路徑為C:\windows，要描述上述路徑，只需輸入system32\cmd.exe 。
相對路徑中的一些特殊符號
.. 表示上一級目錄；
. 表示當(dāng)前目錄，通?？墒÷?br> \ 表示根目錄
小提示
- 絕對路徑使用較少，但是為防止網(wǎng)站被惡意抄襲，可使用絕對路徑，如果有人抄襲采集你的內(nèi)容，里面的鏈接還會指向你的網(wǎng)站。有些抄襲的比較懶，連里面的鏈接一起抄了過去。
- width和height兩個屬性只設(shè)置其中一個屬性，則表示另外的一個屬性等比例縮放。例如，原圖高寬為400x300 px，在img標(biāo)簽中設(shè)置height="150"，則網(wǎng)頁中圖片顯示為200x150 px。如果同時設(shè)置width="100"和height="100"，則網(wǎng)頁中圖片顯示為100x100 px。
進(jìn)階
HTML5中為了提高語義性，增加了figure和figcaption標(biāo)簽，具體如下：
<figure>
<figcaption>圖4-1 黃浦江上的的盧浦大橋</figcaption>
<img src="shanghai_lupu_bridge.jpg" width="350" height="234" />
</figure>
小結(jié)
- 圖片的常用格式及特點(diǎn)
- 圖片的基本語法
- 圖片的常用屬性
- 相對路徑
