在HTML中怎麼引入圖片（兩種方法）

HTML（超文本標記語言）是Web頁面的基礎語言之一，無論是建立靜態頁面或動態頁面，HTML都是不可或缺的部分。在建立網頁時，圖片是非常重要且常用的元素之一，因此我們需要知道如何在HTML中引入圖片。

HTML可以引入多種類型的圖片，如.gif、.jpeg、.png等格式的圖片。在引入圖片之前，我們需要為HTML文件建立一個圖片資料夾，用於儲存所有的圖片檔案。通常，圖片資料夾要放在HTML檔案的相同目錄下，以便HTML檔案可以輕鬆存取它們。

在HTML中，我們可以使用以下兩種方法將圖片引用到Web頁面中。

1. 在標籤中使用圖片

#最常用的方法是在HTML文件中使用img（圖片）標記，它非常簡單易用。以下是該標籤的基本語法：

<img src="image filename">

其中，src屬性用於告訴瀏覽器要從哪裡加載圖片，image filename是圖片檔案的名稱（注意，這裡應該給出相對路徑，而不是絕對路徑）。

例如，如果我們的圖片資料夾和HTML檔案位於同一目錄下，而且我們要將名為「example.gif」的圖片引入到Web頁面中，那麼程式碼將如下所示：

<img src="example.gif">

這將在頁面中顯示名為「example.gif」的圖片。

如果我們想要為圖片添加更多的屬性，例如讓它連結到其他網頁、添加標題、更改寬度和高度等等，我們可以使用以下標籤：

<img src="image filename" alt="Image title" title="Image tooltip" height="number" width="number" border="number" align="left/right/center">

其中， alt屬性用於添加圖片名稱，它將在圖片無法顯示時顯示；title屬性將添加提示文字；height和width屬性用於更改圖片的大小；border屬性用於添加邊框寬度；align屬性用於控制圖片與其他文字的對齊方式。

舉個例子，如果我們想要加入寬度為200像素、高度為100像素，並且將它連結到另一個頁面的圖片，程式碼將如下所示：

<a href="https://www.example.com/"><img src="example.gif" alt="Example Image" title="Click this image to go to example.com" height="100" width="200" border="1" align="center"></a>

2. 使用CSS建立背景中的圖片

我們也可以使用CSS（層疊樣式表）在Web頁面的背景中加入圖片，這是另一種常見的方法。與標籤不同的是，這種方法將圖片作為整個Web頁面的背景，而不是將其作為獨立的元素。

以下是使用CSS在背景中新增圖片的方法：

body {
    background-image: url('image filename');
}

其中，background-image屬性用於告訴瀏覽器需要在背景中顯示的圖片，它還可以有其他選項，例如設定背景顏色和背景圖像的平鋪方式等。

例如，如果我們希望在Web頁面的背景中顯示名為「example.gif」的圖片，並且使其水平和垂直重複，程式碼將如下所示：

body {
    background-image: url('example.gif');
    background-repeat: repeat;
}

這將使整個頁面的背景都被填充為“example.gif”圖片。

在使用這種方法時，我們需要特別注意圖片的大小，以確保它們在不同類型的裝置上都顯示正確。

總結

無論是在標籤中使用圖片或是使用CSS在背景中加入圖片，HTML都提供了各種方法來引入圖片。在使用這些方法時，我們需要注意圖片的大小、路徑和格式，以確保它們能夠正確地顯示在Web頁面中。透過使用HTML中的圖片，我們可以輕鬆地為Web頁面添加個人化元素，使頁面更加豐富和吸引人。

以上是在HTML中怎麼引入圖片（兩種方法）的詳細內容。更多資訊請關注PHP中文網其他相關文章！