昨天已經大致介紹網頁的組成，也知道HTML是透過<開頭語法>…</結尾語法>來夾住要放置的內容。

怎麼在HTML放入圖片呢？

放入圖片的語法很簡單，只要在輸入語法的地方輸入img之後再按tab鍵，就會跑出以下的語法了；或是直接輸入以下語法：

<img src="http://placekitten.com/200/200" alt="">

這個語法就是圖片的語法，我們可以看到裡面有scr和alt兩個好像可以填入內容的部分。scr就是填入圖片來源的部分，可以在" "中間填入圖片來源。這邊要提醒的是，在網頁中放上圖片都會有一些版權的問題，請注意不要隨意盜圖喔！

在alt的部分，是在圖片無法讀取或顯現時會出現的文字，若想在圖片中做說明或顯示文字，一般而言會透過CSS的效果將說明文字顯示出來，一般情況下把alt="..."的部分整個移除對於圖片顯示不會有任何影響。

另外在背景圖案的部分，一般不會用這個語法處理，而是透過CSS加上去會比較簡單，效果也會比較好，會在CSS的部分說明背景圖案的處理。

圖片太大怎麼辦？

透過HTML自身語法處理(不推薦)

HTML自身有語法可以調整圖片的大小，但一般而言對於外觀的顯示與修飾主要都是透過CSS來處理。因此雖然可以透過HTML的語法處理圖片大小，還是建議網頁外觀的部分透過CSS集中處理是最好的選擇，以免造成後續透過CSS調整外觀但是圖片大小無法調整的狀況，屆時Debug時應該會找一陣子。

透過HTML調整圖片的語法如下，一般而言調整圖片大小只會調整寬度，因為高度會依照寬度等比例進行縮放，同時固定寬度與高度會讓圖片因長寬被固定而產生變形。

<img src="http://placekitten.com/200/200" alt="" width="150px" height="150px">

透過CSS語法對圖片大小進行處理(推薦)

對於網頁外觀的調整集中在CSS處理是業界共識，但由於目前依照文章的脈絡在這邊說明可能會讓閱讀者無法理解。CSS最簡單的做法大概就是在圖片外面加上一個框框，讓圖片的長度、寬度不會超過那個框框。預計會在Day8的時候將調整圖片的方法說明清楚。

如何簡單預覽目前製作的網頁？

差點忘記要提好用的預覽插件，首先先在左側的地方點選延伸模組，可以參考以下圖片：

接著在搜尋欄輸入Live Server，接著點選就可以安裝了：

安裝完成後，只要在右下角點選Go Live，你的預設瀏覽器就會跳出來，就可以預覽目前製作的網頁囉！只要編輯該檔案存檔後，重新整理該頁面就會隨時更新，隨時觀察編輯網頁的情形。

是不是很簡單！明天預計會在HTML放入影音，我們明天見囉！