導(dǎo)入：
字不如表肉拓，表不如圖，圖不如視頻梳庆。今天我們就來學(xué)習(xí)圖片以及在網(wǎng)頁中插入圖片暖途。
網(wǎng)頁中常用圖片格式
常見圖片格式有：GIF、JPEG膏执、PNG驻售、TIF、BMP等等更米，在網(wǎng)頁中常用的是GIF欺栗、JPEG、PNG征峦。
- JPEG格式
JPEG支持幾百萬種顏色（電腦最多能顯示1600多萬種顏色）迟几，適合于顯示照片等顏色細(xì)節(jié)豐富的精美圖像。不過它是有損壓縮栏笆，在壓縮時(shí)會丟失一些圖片細(xì)節(jié)类腮，降低了最終文件的質(zhì)量。并且可利用壓縮比例控制圖像文件大小竖伯。 并且在編輯和重新保存JPG格式圖像時(shí)存哲，這種下降損失會累積。JPEG不適用于所含顏色很少七婴、具有大塊顏色相近的區(qū)域或亮度差異十分明顯的較簡單的圖片祟偷。 - GIF格式
GIF格式是一種無損壓縮格式。GIF格式可以存多幅彩色圖像打厘，不過GIF只支持256種顏色修肠。如果把存于一個(gè)GIF文件中的多幅圖像數(shù)據(jù)逐幅讀出并顯示到屏幕上，就可構(gòu)成一種最簡單的GIF動畫户盯。GIF只支持1個(gè)bit的透明通道嵌施，所以只有透明和不透明兩種情況。 - PNG格式
PNG格式理論上是無損壓縮莽鸭，常見的有分PNG8（可保存256種顏色無損失）吗伤、PNG24（保存1600多萬種顏色）和PNG32(保存1600多萬種顏色和256級透明度）。但是圖像顏色超過256種顏色而使用PNG8的話硫眨，也是會損失顏色足淆。
理論上，PNG用來存儲灰度圖像時(shí)，灰度圖像的深度可多到16位巧号，存儲彩色圖像時(shí)族奢，彩色圖像的深度可多到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)前目錄拣帽，通程鄣纾可省略
\ 表示根目錄
小提示
- 絕對路徑使用較少，但是為防止網(wǎng)站被惡意抄襲减拭，可使用絕對路徑蔽豺，如果有人抄襲采集你的內(nèi)容，里面的鏈接還會指向你的網(wǎng)站拧粪。有些抄襲的比較懶修陡，連里面的鏈接一起抄了過去。
- width和height兩個(gè)屬性只設(shè)置其中一個(gè)屬性可霎，則表示另外的一個(gè)屬性等比例縮放魄鸦。例如，原圖高寬為400x300 px癣朗，在img標(biāo)簽中設(shè)置height="150"拾因，則網(wǎng)頁中圖片顯示為200x150 px。如果同時(shí)設(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)
- 圖片的基本語法
- 圖片的常用屬性
- 相對路徑
