如何在網頁裡加入圖片？
網頁要有豐富的內容，除了文字外，一定還要有圖片。在網頁中置入合適的圖片，採用美感的編排，將會讓網頁更生動。 我們可以過設定幫網頁設定背景顏色，或是以圖片當成背景，當然可以在合適的位置加入圖片。
網頁的背景色 <body bgcolorr>
HTML5建議不要在body中使用各種屬性，所以我們直接採用style的方式，直接給一個CSS來修飾。 <body style="background-color: #a8e8e2;">
用了這個標籤後，整個版面的背景就會呈現#a8e8e2這個顏色。
網頁背景圖片 <body background>
background的屬性可以設定網頁的背景圖片，用法如下 <body style="background-image: url();">
加入圖檔 <img src=" ">
文字旁若要加入圖片，使用img標籤就可以把圖片匯入網頁中。在VScode編輯器，只要鍵入img，就會出現img的emmet提醒，點選img就會出現<img src="" alt="">，可以減少HTML輸入的繁複。src後面要填入的是圖片檔案的位置，alt屬性為圖片無法顯示時會改以填入文字代替。 <img src="img/img10.jpg">
設定圖片大小 <img height width>
目前的網頁趨勢是具有RWD的功能，可以在不同裝置中瀏覽時，版面自動調整成適合閱讀的樣式。但若要把圖片固定在某一寬度，則可以這樣寫。 <img src="img/img10.jpg" height="auto" width="250px> 縮小圖片寬度為250px，長度等比例縮小。
可以用於網頁的圖檔格式
瀏覽器目前支援的圖片檔案種類，主要有jpeg（或jpg）、gif、以及png三種。只要副檔名為這三種格式，就可以在網頁裡正常顯示。 若不是這三種，那就必須先用繪圖軟體或影像處理軟體先轉檔。特別說明PNG檔，Portable Network Graphics中譯為可攜式的網路圖片。這個較新的圖檔格式結合了JPEG和GIF兩種格式的優點。採用和GIF一樣不會破壞畫質的壓縮方式，同時和JPEG相同 可以支援全彩的影像，PNG支援去背的圖案，但是沒有GIF的動畫功能。
PNG圖片的特性
- 採用比gif更高效率的非破壞式壓縮
- 灰階圖形可以達16位元，全彩圖形可以達48位元
- 含gamma校正值，讓圖片在不同的平台仍有一致的顯示效果
- 支援alpha channel，支援透明效果（去背圖），總共可以支援65536層不同的透明效果。
如何在網頁裡加入圖片？
網頁要有豐富的內容，除了文字外，一定還要有圖片。在網頁中置入合適的圖片，採用美感的編排，將會讓網頁更生動。 我們可以過設定幫網頁設定背景顏色，或是以圖片當成背景，當然可以在合適的位置加入圖片。
網頁的背景色 <body bgcolorr>
HTML5建議不要在body中使用各種屬性，所以我們直接採用style的方式，直接給一個CSS來修飾。 <body style="background-color: #a8e8e2;">
用了這個標籤後，整個版面的背景就會呈現#a8e8e2這個顏色。
網頁背景圖片 <body background>
background的屬性可以設定網頁的背景圖片，用法如下 <body style="background-image: url();">
加入圖檔 <img src=" ">
文字旁若要加入圖片，使用img標籤就可以把圖片匯入網頁中。在VScode編輯器，只要鍵入img，就會出現img的emmet提醒，點選img就會出現<img src="" alt="">，可以減少HTML輸入的繁複。src後面要填入的是圖片檔案的位置，alt屬性為圖片無法顯示時會改以填入文字代替。 <img src="img/img10.jpg">
設定圖片大小 <img height width>
目前的網頁趨勢是具有RWD的功能，可以在不同裝置中瀏覽時，版面自動調整成適合閱讀的樣式。但若要把圖片固定在某一寬度，則可以這樣寫。 <img src="img/img10.jpg" height="auto" width="250px> 縮小圖片寬度為250px，長度等比例縮小。
可以用於網頁的圖檔格式
瀏覽器目前支援的圖片檔案種類，主要有jpeg（或jpg）、gif、以及png三種。只要副檔名為這三種格式，就可以在網頁裡正常顯示。 若不是這三種，那就必須先用繪圖軟體或影像處理軟體先轉檔。特別說明PNG檔，Portable Network Graphics中譯為可攜式的網路圖片。這個較新的圖檔格式結合了JPEG和GIF兩種格式的優點。採用和GIF一樣不會破壞畫質的壓縮方式，同時和JPEG相同 可以支援全彩的影像，PNG支援去背的圖案，但是沒有GIF的動畫功能。
PNG圖片的特性
- 採用比gif更高效率的非破壞式壓縮
- 灰階圖形可以達16位元，全彩圖形可以達48位元
- 含gamma校正值，讓圖片在不同的平台仍有一致的顯示效果
- 支援alpha channel，支援透明效果（去背圖），總共可以支援65536層不同的透明效果。