HTML - 圖片：初学者的全面指南

您好，有志於網頁開發的夢想家們！今天，我們將深入HTML圖片的精彩世界。作為您親切友善的鄰居電腦老師，我在這裡指引您踏上前程，一步步前行。所以，拿起你的虛擬畫筆，讓我們為我們的網頁增添些色彩吧！

HTML - Images

為什麼要在HTML中使用圖片？

在我們投入代碼之前，讓我們先來討論一下為什麼圖片在網頁設計中如此重要。想像一下走進一個所有書籍都只是純文字的圖書館——相當無聊，對吧？沒有圖片的網站就是這個樣子。圖片可以：

讓你的網站在外觀上更有吸引力
快速傳達信息
打破大塊的文本
提高用戶參與度
有助於品牌建立和識別

現在我們知道了圖片的重要性，讓我們來學習如何使用它們！

HTML圖片的例子

基本的圖片標籤

在HTML中顯示圖片的基本是<img>標籤。它是一個自閉標籤，意味著它不需要另外的關閉標籤。這裡是基本的語法：

<img src="path/to/your/image.jpg" alt="圖片的描述">

讓我們來分解這個：

src：這個屬性指定了你的圖片文件的來源（位置）。
alt：這提供了圖片的替代文字，這對於無障礙性和SEO來說很重要。

例如，如果我們想要顯示一張可愛的貓咪照片，我們可能會這樣寫：

<img src="cute-cat.jpg" alt="一隻毛茸茸的橙色虎斑貓">

設置圖片尺寸

有時候，你可能想要控制你的圖片大小。你可以使用width和height屬性來做到這一點：

<img src="big-dog.jpg" alt="一隻大型的金毛獵犬" width="300" height="200">

這將以300像素寬和200像素高的尺寸顯示圖片。記住，在上傳到你的網站之前，最好先調整你的圖片大小以獲得最佳性能。

設置圖片邊框

在網絡的早期時代，我們喜歡在所有東西周圍加上邊框——就像在房子裡的每張照片上都加上相框一樣！雖然現在這不是很常見，但你可以使用CSS為你的圖片添加邊框。這樣做：

<img src="vintage-car.jpg" alt="一輛閃閃發光的紅色老式汽車" style="border: 2px solid black;">

這將為你的圖片添加一個2像素寬的實心黑色邊框。隨意嘗試不同的邊框樣式和顏色！

設置圖片對齊

對齊圖片可以幫助創造一個更有組織且視覺上更悅目的佈局。雖然現代網頁設計通常使用CSS來做到這一點，但HTML仍然有一些對齊選項：

<img src="coffee-mug.jpg" alt="一杯冒熱氣的咖啡" align="left">
<p>這段文字將在圖片的右側繞排。</p>

align屬性可以接受如"left"、"right"、"top"、"bottom"或"middle"等值。然而，請記住，這個屬性已被視為過時，使用CSS對齊通常更為推薦。

免費網絡圖形

現在，我知道你們在想什麼："但是老師，我從哪裡獲得這些令人驚奇的圖片？" 好問題！有許多網站提供免費、高質量的圖片供你的專案使用。這裡有一些我喜歡的：

Unsplash
Pexels
Pixabay
Freepik
Flaticon（對於圖標來說很棒！）

記住在使用任何圖片之前總是要檢查授權條款！

高級圖片技巧

响應式圖片

當我們進入更高级的領域時，讓我們來談談响应式圖片。這些圖片會根據用戶的屏幕大小調整它們的大小。這裡有一個簡單的方法來使你的圖片响应式：

<img src="responsive-example.jpg" alt="一個响应式圖片的例子" style="max-width: 100%; height: auto;">

這段CSS確保圖片永遠不會比它的容器更寬，並且會保持它的縱橫比。

圖片地圖

圖片地圖允許你在單個圖片上創建可點擊區域。這就像在網站上創建一個藏寶地圖！這裡有一個基本示例：

<img src="world-map.jpg" alt="世界地圖" usemap="#worldmap">

<map name="worldmap">
<area shape="rect" coords="0,0,82,126" href="north-america.html" alt="北美洲">
<area shape="circle" coords="90,58,3" href="europe.html" alt="歐洲">
</map>

在這個例子中，我們在 world map 圖片上創建了北美洲（一個矩形）和歐洲（一個圓形）的可點擊區域。

在HTML中使用圖片的最佳實踐

讓我們總結我們的課程，複習一些最佳實踐：

總是使用alt屬性以提高無障礙性和SEO。
為網絡使用優化你的圖片以改善加載時間。
使用合適的文件格式（JPG對於照片，PNG對於帶有透明度的圖形）。
考慮使用响应式圖片以適應移動設計。
不要僅僅依賴圖片來傳達重要信息。

圖片相關的HTML屬性總結

屬性	描述	示例
src	指定圖片的路徑	`src="image.jpg"`
alt	提供替代文字	`alt="一個描述"`
width	設置圖片的寬度	`width="300"`
height	設置圖片的高度	`height="200"`
align	指定圖片的對齊方式	`align="left"`
usemap	指定圖片為客戶端圖片地圖	`usemap="#mapname"`

這就是了，未來的網頁魔法師們！你現在已經擁有了在網頁上灑滿吸引眼球的圖片知識。記住，一幅圖片值千個文字，但在網頁開發中，它等於千行代碼！快樂編程，願你的網站總是視覺上令人驚艷！

Credits: Image by storyset