圖像對於美化以及在網頁上以簡單的方式描述許多複雜的概念非常重要。本教程將引導您完成在網頁中使用圖像的簡單步驟。
Insert Image
您可以使用<img>標記在網頁中插入任何圖像。下面是使用此標記的簡單語法。
<img src = "Image URL" ... attributes-list/>
<img>標記是空標記，這意味著它只能包含屬性列表，並且沒有結束標記。
Example
爲了嘗試下面的示例，讓我們將HTML文件test.htm和圖像文件test.png放在同一個目錄中−
<!DOCTYPE html>
<html>
<head>
<title>Using Image in Webpage</title>
</head>
<body>
<p>Simple Image Insert</p>
<img src = "/html/images/test.png" alt = "Test Image" />
</body>
</html>
這將產生以下結果&負;
您可以根據需要使用PNG、JPEG或GIF圖像文件，但請確保在src屬性中指定了正確的圖像文件名。圖像名稱始終區分大小寫。
alt屬性是一個強制屬性，如果無法顯示圖像，則該屬性指定圖像的備用文本。
Set Image Location
通常我們把所有的圖像放在一個單獨的目錄中。因此，讓我們將HTML文件test.htm保存在主目錄中，並在主目錄中創建一個子目錄image s。
Example
假設我們的圖像位置是「image/test.png」，請嘗試以下示例−
<!DOCTYPE html>
<html>
<head>
<title>Using Image in Webpage</title>
</head>
<body>
<p>Simple Image Insert</p>
<img src = "/html/images/test.png" alt = "Test Image" />
</body>
</html>
這將產生以下結果&負;
Set Image Width/Height
您可以使用width和height屬性根據需要設置圖像寬度和高度。可以根據像素或實際大小的百分比指定圖像的寬度和高度。
Example
<!DOCTYPE html>
<html>
<head>
<title>Set Image Width and Height</title>
</head>
<body>
<p>Setting image width and height</p>
<img src = "/html/images/test.png" alt = "Test Image" width = "150" height = "100"/>
</body>
</html>
這將產生以下結果&負;
Set Image Border
默認情況下，圖像周圍會有一個邊框，您可以使用border屬性根據像素指定邊框厚度。厚度爲0表示圖片周圍沒有邊框。
Example
<!DOCTYPE html>
<html>
<head>
<title>Set Image Border</title>
</head>
<body>
<p>Setting image Border</p>
<img src = "/html/images/test.png" alt = "Test Image" border = "3"/>
</body>
</html>
這將產生以下結果&負;
Set Image Alignment
默認情況下，圖像將在頁面左側對齊，但您可以使用align屬性將其設置在頁面的中心或右側。
Example
<!DOCTYPE html>
<html>
<head>
<title>Set Image Alignment</title>
</head>
<body>
<p>Setting image Alignment</p>
<img src = "/html/images/test.png" alt = "Test Image" border = "3" align = "right"/>
</body>
</html>
這將產生以下結果&負;
Free Web Graphics
對於包括模式在內的免費網絡圖形，您可以查看免費網絡圖形